Contents

• TL;DR.
• Installation.
• App structure.
• Express integration.
• Goodies.
• Compatibility, Further reading, Contributions, LICENSE.

TL;DR.

This boilerplate code lets you rapidly jump into building a full-stack JavaScript web application. The frontend combines the power of React.js, Next.js, Bootstrap, and SCSS, while the backend utilizes Express.js. React code is isomorphic and supports Server Side Rendering (SSR).

Installation

To get started with this boilerplate, follow these steps:

• Install the boilerplate globally using: sudo npm install -g next-express-bootstrap-boilerplate
• Initialize a project in your current directory with: next-boilerplate or specify a folder: next-boilerplate $FOLDER_NAME
• If you provided a folder name, navigate into it: cd $FOLDER_NAME
• For development, run: npm run dev or yarn dev.
• For production, run: npm start or yarn start. This will build your app and serve the production version at port 9001.
• Visit localhost:9001 to check your application!

And then, start coding! 🙂

App structure

The folder structure of this boilerplate is intuitive, making it easy to navigate:

• app – Contains the Next.js application.
  • components – Common components are stored here.
  • pages – All app routes reside here.
  • styles – CSS and SCSS files live here, including index.scss and bootstrap.min.css.
• .babelrc, next.config.js, postcss.config.js – These files contain configurations for Babel, Next.js, and PostCSS respectively.
• public – For static assets, like images.
• app.js, next.js, package.json, and README.md – The essential files that keep everything running.

Styles can be imported as you would in a regular React project but should be inside style tags for Next.js to recognize them.

Express integration

The backend routing is handled within app.js, where the Express router is initialized. It includes middleware that directs requests to the Next.js pages. Here’s a simple analogy:

Imagine a restaurant where Express.js is the waiter taking orders, while Next.js is the chef cooking them up. The waiter takes requests (routes), processes them, and serves them fresh from the kitchen (which corresponds to rendering pages). If the waiter doesn’t have a specific dish on the menu (i.e., an express route), he knows to refer to the chef for a suggestion based on the customer’s request. That’s the essence of this integration!

Example: app.js

const express = require('express');
const logger = require('morgan');
const path = require('path');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const next = require('next');
const app = express();

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(cookieParser());
app.use('/public', express.static(path.join(__dirname, 'public')));

const start = async (port) => {
    await next(app);
    app.get('/main', (req, res) => req.app.render(req, res, '/main', { routeParam: req.params.routeParam }));
    app.listen(port);
};

start(9001);

Goodies

This boilerplate comes packed with features:

• Hot loading for immediate updates in the development environment, ensuring a seamless coding experience.
• Linting enabled with ESLint, adhering to the Airbnb style guide.

Compatibility

This boilerplate works with React versions ^16.6.3 and Node version >= 8.12.0. Check support for async/await for older versions with Babel using the transform-runtime plugin.

Troubleshooting

If you encounter issues while setting up or running your application, consider the following steps:

• Ensure the correct versions of Node and npm are installed.
• If you face issues with hot loading, try restarting your development server.
• Check for missing dependencies by running npm install or yarn.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.