React SSR Typescript template


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

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.

NameDefaultDescription
publicPath/publicStatic 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|gif|webp)$/iExtensions of the static resources, injected as relative URL into the client bundle. You can import them directly as modules into your project. NOTE: SVGs will be embedded with the svg tag
injectStylesfalseDefine 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/viewsPath for the ejs templates
devServerPort3000Server port in development mode
clientDevServerPort3100Webpack-dev-server port for the client dev bundle. It must be different from devServerPort
devBuildPath%TEMP% or /var/tmp + "name" from package.jsonPath for the development build
devServerAddresslocalhostDev server address, change it only if you are working remotely without tunneling
openBrowsertrueOpen browser on start
serverPort80Server port in production mode. You can override it by passing the port number as the first argument
bundleExternalstrueBundle 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
minimizeServerBundlefalseMinimize the server bundle. This is generally not necessary. Set true if you want to save storage memory
generateBundleGraphtrueGenerate 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 asuppressHydrationWarning={true} in your affected JSX tag.

Tests

Tested featureResultInfo

Compatibility

Links and credits

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

Licence

MIT @ Jonathan Mataloni