A boilerplate to quickly start working on React projects using hybrid rendering.
Basically, in production there is a small web server (here pure native http module) that'll be in charge of pre-rendering your React application. It then gets hydrated client-side, which means React will then bind all the events it needs to bind and work as if it was CSR. It helps to enhance SEO, load times, and makes your application usable by users who disabled JavaScript.
- No expressjs: It uses Node's http module to create the web server, and not bloated stuff;
- Hot reload: It is capable of hot reloading while developing;
- react-helmet and react-router are ready to be used, no extra-setup required;
- Image minification with imagemin in production builds;
There are also some env variables that get injected in your application through webpack's DefinePlugin
:
WEBPACK.GIT_REVISION
- Git revision; null if git isn't present.
You're of course able to edit the configuration to your needs.
Note: This boilerplate uses css modules by default. You can disable
them by looking at webpack.config.js
line 90.
@components/*
: src/components/*@styles/*
: src/styles/*@assets/*
: src/assets/*
Note: This boilerplate uses pnpm for dependency management.
Both webpack and the http server must be running
pnpm run dev
- Runs the http server with nodemonpnpm run watch
- Runs webpack dev server
Then, open http://localhost:8080 in your web browser and start tinkering!
- Build the app:
pnpm run build
- And then start the http server!
pnpm run start
You can change the port by setting the PORT env variable. By default, it'll listen on http://localhost:6969.
- TypeScript support
- Redux support
- Something to easily configure the boilerplate w/o having to edit stuff (cli args? env vars? install script?)
- Markdown support (Export as React component)