next-express-bootstrap-boilerplate

next-express-bootstrap-boilerplate is a JavaScript boilerplate that scaffolds a full-stack application combining a Next.js React frontend with an Express.js backend and full server-side rendering.

What is next-express-bootstrap-boilerplate?

This boilerplate, created by Mustansir Zia, provides a starting point for a full-stack JavaScript web application. It pairs a React.js frontend built on Next.js and react-bootstrap with an Express.js backend. The React code is isomorphic, meaning components render on both the server (SSR) and the browser. The project ships with a CLI that initializes the app in a chosen folder; the production build runs on port 9001.

Key Features

• Full-stack app structure — An app/ directory holds the Next.js client with pages, components, and styles; the Express server lives in app.js, and static assets like icons are served from public/.
• Server-side rendering with Express integration — app.js couples Next.js to Express via an asynchronous next(app) call, and any route not explicitly defined falls through to Next.js's automatic page handler.
• Bootstrap and SCSS support — react-bootstrap components are loaded through a Theme HOC that imports bootstrap.min.css from app/styles/vendor; custom CSS/SCSS files are imported directly and transpiled to css-in-js for Next.js.
• Hot reloading — In development, Next.js hot reloads client-side changes including CSS/SCSS files, while nodemon watches server-side code and restarts the Node server automatically.
• Preconfigured ESLint — Uses the Airbnb style guide with custom rules set in the eslintConfig key of package.json.
• Simple CLI scaffolding — Install globally with npm i -g next-express-bootstrap-boilerplate, then run next-boilerplate or next-boilerplate my-folder to create a project.
• Known dependency versions — Uses React and react-dom ^16.6.3 and requires Node.js version 8.12.0 or higher; older Node versions need Babel's transform-runtime plugin.

Who is it for?

• Full-stack JavaScript developers — Those who want a preconfigured setup of Next.js, React, Express, and Bootstrap to avoid wiring up SSR by hand.
• Developers learning SSR — The boilerplate demonstrates how to render React components on the server with Next.js and route unhandled express requests to Next.js.
• Teams wanting hot reload and linting — The development experience includes automatic client hot reload, nodemon server restarts, and ESLint with Airbnb rules out of the box.

What can you do with it?

• Scaffold a new project — After global npm install, run next-boilerplate in an empty directory (or with a folder name) to generate the full stack, then start coding with npm run dev or yarn dev.
• Build production-ready apps — npm start builds the app and serves the production version at localhost:9001, with static assets reachable under /.
• Add your own routes — Express routes are defined in app.js; the README shows an example /main route using req.app.render to render the home page, and unhandled paths automatically hit Next.js pages.

How does it work?

After installation, the app/ folder holds the Next.js application. app.js initializes Express with body-parser, cookie-parser, and static file serving, then calls next(app) to attach Next.js. The next.js file bootstraps the integration. In development, hot reloading is provided by Next.js for client code and nodemon for server code.

FAQ

Is the boilerplate free to use?

Yes, the project is licensed under the MIT License, and the full source is available on GitHub.

How do I install it?

Run sudo npm i -g next-express-bootstrap-boilerplate (the README uses sudo) or clone the repository, remove the .git folder, and run npm i or yarn.

What Node.js version do I need?

The boilerplate requires Node.js version 8.12.0 or newer because it uses async/await. For older versions, the README suggests building with Babel and the transform-runtime plugin.

Does it include a database or authentication?

No, the boilerplate focuses on the React/Next.js/Express app shell with hot reloading, linting, and static asset handling; it leaves database and auth integration to the developer.

Can I use Bootstrap without the Theme HOC?

Yes, the Theme HOC is only needed when using react-bootstrap components. Pages that don't use bootstrap can omit it, as the example in app/pages/index.js shows.