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.
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.
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|gif|webp)$/i | Extensions 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 |
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 + "name" from package.json | 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 |
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.
| Tested feature | Result | Info |
MIT @ Jonathan Mataloni