/react-express-ssr-setup-js

ReactJS & Express setup with webpack, supporting SSR.

Primary LanguageJavaScript

JavaScript - ReactJS & Express SSR setup

Supports:

  • CSR - see React SPA.
  • SSR - see React SSR.
  • CSS & CSS MODULES. (autoprefixer)
  • ESLint & Prettier.
  • Static assets in /public . (will NOT go through webpack)
  • Allowed asset types for imports: png, svg, jpg, jpeg, gif. (will go through webpack)

Available scripts

yarn start - Runs development mode.

yarn build - Builds project for production.

SSR page data

Fetches data from serverless function hosted on napkin.io.

Napkin

Backend in the Browser.

Build production-ready API endpoints. No infra. No boilerplate. Just code.

Caveats

This setup is fine for smaller projects as it uses webpack watch mode. In development, webpack will recompile on changes and write to build directory. This might be slow for larger scale apps.

Possible issues:

  • Production optimization might not have been done right (i did my best).
  • Development might get slower as project grows (due to watch mode).

TODO:

  • Optimize server build (I am not sure if it's required).
  • HMR and React Refresh for client and server side code.

Check out React Hot Loader for details.