This project is a template of a server side rendering a React application.
-
General Setup
- β Babel 7
- π¦ Webpack 5
- π₯ TypeScript 4 (via Babel)
- π§Ή Prettier
- π§Ή Stylelint
- π¦ ESLint 7
- π‘ Jest
- π‘ Enzime
- β Server Side Rendering with Express
- β React i18next for multi language support
- π React Fast Refresh
- β SASS
- β CSS Modules
- β PostCSS
- β Dependencies visualization with Graphviz
- π Storybook 6
- β Precommit hooks via lint-staged + Husky
- π₯ PWA support
- π₯ PWA assets and metadate automatically created
-
Libs and dependencies
- β React 17
- β Express 4.x
- β React i18next for multi language support
- β Redux + Thunk middleware
- β Immer
- β Reselect
- β React Router 5
- β React Helmet
Clone the repository, cd
into the directory and run yarn
(or npm install
) on your command line to install all the dependencies. You're ready to go now !
There are npm scripts for all the relevant things. The server will always be started on port 8500 unless otherwise specified in process.env.PORT. You can use a .env file to specify env vars. If you want to use them in your client side code, don't forget to add them in config/env.ts.
Starts the app in development mode: creates a new client and server dev build using Webpack, starts the Express server build (for both file serving and server side pre-rendering) and keeps webpack open in watchmode. Updates the app (if possible) on change using HMR.
Creates a new build optimized for production.
Clean the build folder.
Run all tests using Jest.
Run ESLint for all JavaScript and TypeScript files.
Run Stylelint for all CSS files.
Run Stylelint for all SASS files.
Run lint:js
, lint:css
and lint:sass
in parallel.
Starts webpack-bundle-analyzer
to give you the opportunity to analyze your bundle(s).
Creates an image of your dependency graph. Requires GraphVIZ.
Run the Storybook interface on the port 6006.
Generate the static resources for Storybook. Useful to host online.
Format the files with Prettier, ESLint and Stylelint.
Display intructions on the command line to create files easily.
There are a few environment variables you can set to adjust the setup to your needs
Variable | Default | Description |
---|---|---|
PORT |
8500 |
Port number your application will be served |
HOST |
http://localhost |
Url (including protocol!) your application will be served on. |
DEVSERVER_HOST |
http://localhost |
Optional. Different host for the Webpack Dev Server to be served |
In some cases you might not want to generate source maps for the generated files. In this case you can set the SOURCEMAP
environment variable to false
. No source map files will be generated then. This works no matter if you're in devmode or building for production.
By default if you run npm start
the development server will use port 8500. You can change this by specifying a PORT
environment variable.
Set the PWA
environment variable to true
and add a file named app.json
to the root of the project with your manifest properties :
Key | Default | Description |
---|---|---|
name |
null |
Your application's name. |
short_name |
null |
Your application's short_name. |
description |
null |
Your application's description. |
lang |
en |
Primary language for name and short_name |
dir |
auto |
The base direction in which to display direction-capable members of the manifest. |
background_color |
#ffffff |
Background colour for flattened icons. |
theme_color |
#ffffff |
Theme color user for example in Android's task switcher. |
display |
standalone |
Display mode: fullscreen , standalone , minimal-ui or browser . |
scope |
/ |
set of URLs that the browser considers within your app |
start_url |
/?utm_source=homescreen |
Start URL when launching the application from a device. |
orientation |
any |
The orientation to use |
You can add more properties. For more informations see https://developer.mozilla.org/en-US/docs/Web/Manifest.
To complete the configuration of your web application, specify the path of your favicon in the file config/paths
(you must use svg icon). When you finally enabled the environment for your web application, the metadata and the icons will be generated automatically for you. But you can still customize the icons generated by creating a file icons.json
at the root of your project with the json schema defined there. If you do not want to generate the metadata or the icons, you can set the METADATA_GENERATION
or ICONS_GENERATION
environment variables to false
.
- Add offline support using Workbox
- Import SVGs as React component
- Migrate to Webpack 5
- Add official enzyme adaptater for react 17