pure-react-ssr-hmr

Demo site: https://pure-react-ssr-hmr.jonamat.cloud

Preconfigured template to develop SSR React apps in Typescript. It provides several features to speeding up your development workflow, using webpack hot modules replacement to track file changes. It also provides some tools to deal with the most popular developing practices, such as SCSS transpilation, static resources importing, code linting and more. The preconfigured Express server app provides runtime compression and minification, EJS rendering, optimizations according to the target environment and more.

Features

• Server and client changes watching
• Ready Express app, optimized according to the target environment
• Ready routing system
• Configuration file to customize the app build and behavior
• ESlint and prettier linting
• Portable server bundle (run it without external modules)
• SCSS and CSS support to create stylesheets or inject styles as <style> tag (see Configuration)
• Inline SVG injection
• Links images to relative URLs by importing them as modules directly into your code
• Runtime minification and compression
• Hashed output file names for static resources to optimize caching
• Generates the client bundle dependency graph

Usage

This template is ready to use. Delete the content of /src/common/ and start to write your own app. Export a wrapper component as default export in your /src/common/index.tsx. Use npm run start to run the develompent server. Use npm run build to build your app, put the content of the generated /build/ directory in your target machine and run with node ./server.

Configuration

The config.js provides some shared variables to quickly configure the app build and server behaviors.

Name	Default	Description
publicPath	/public	Static content path. This content will be copied in /staticDirname/ with the other client resources.
staticDirname	"static"	Directory name for static resources in the production build
fileLoaderRegex	`/.(png	jpe?g
injectStyles	false	Define how client will fetch the styles. Set true to inject styles in <style> tag, or false to link the CSS stylesheet in the html header
serverViewsPath	/src/server/views	Path for the ejs templates
devServerPort	3000	Server port in development mode
clientDevServerPort	3100	Webpack-dev-server port for the client dev bundle. It must be different from devServerPort
devBuildPath	%TEMP% or/var/tmp + package.name	Path for the development build
devServerAddress	localhost	Dev server address, change it only if you are working remotely without tunneling
openBrowser	true	Open browser on start
serverPort	80	Server port in production mode. You can override it by passing the port number as the first argument
bundleExternals	true	Bundle all the dependencies required by server. This make the bundle portable but larger. If you want to run the server from the build directory this is not necessary
minimizeServerBundle	false	Minimize the server bundle. This is generally not necessary. Set true if you want to save storage memory
generateBundleGraph	true	Generate a visual graph of the client bundled dependencies
statisticsDirname	"client_build_stats"	Statistics directory name for the files of the client production bundle graph

Limitations

If you need to execute a script that can be only executed from client side (fetch data from local storage, access to window or document object etc) which will affect the DOM, you have to dinamically change the behavior of your code according to the environment. This will throw a warning from React, which will complain about the differences between the server rendered DOM and the calculeted one by client. To suppress this warning you can add a suppressHydrationWarning={true} in your affected JSX tag.

Compatibility

• Node >= 12
• Webpack >= 5
• Express >= 4

Links and credits

Repository: https://github.com/jonamat/pure-react-ssr-hmr
Demo site: https://pure-react-ssr-hmr.jonamat.cloud
Real usage: In progress
Why you should render React on the server side: Link to the article
Inspiration: yusinto/universal-hot-reload

Licence

MIT @ Jonathan Mataloni