Full-Stack React SSR Application Template

This repository is a full-stack sample web application based on React+TypeScript+Babel+Webpack+Jest (+Redux+Express) that creates a simple whole-website architecture with Server-Side Rendering (SSR), and provides the foundational services, components, and plumbing needed to get a basic web application up and running.

Demo

Server runs on http://localhost:3000

Table of Contents

• File Structures
• Getting Started
• Deploy on Custom Server
• Contributing
• Changelog
• Licensing

---

File Structures

1
2fullstack-react-ssr-app-template/
3├── README.md
4├── CHANGELOG.md
5├── CONTRIBUTING.md
6├── LICENSE
7├── ecosystem.config.js  #for pm2
8├── babel.config.js
9├── webpack.config.js
10├── package-lock.json
11├── package.json
12├── test/
13├── public/
14│   ├── index.html
15│   └── assets/
16├── dist/
17│   ├── css/
18│   │   ├── app.css
19│   │   ├── app.css.map
20│   │   ├── app.min.css
21│   │   └── app.min.css.map
22│   └── js/
23│   │   ├── app.js
24│   │   ├── app.js.map
25│   │   ├── app.min.js
26│   │   └── app.min.js.map
27├── src/
28│   ├── client/
29│   │   ├── client.js
30│   │   ├── actions/
31│   │   ├── reducers/
32│   │   ├── router/
33│   │   ├── components/   #Independent React components
34│   │   ├── views/
35│   │   │   ├── _pages/
36│   │   │   └── _html/
37│   └── server/
38│   │   ├── app.js
39│   │   ├── server.js
40│   │   └── renderer.js
41│   └── store/
42│   │   └── createStore.js
43└──

Getting Started

You will need to have node setup on your machine. That will output the built distributables to ./dist/* and ./public/*.html.

Step 1. Use NPM (Locate your current directory of project, and enter the following command.) or download the latest version from Github. For nodejs you have to install some dependencies.

1$ sudo npm install fullstack-react-ssr-app-template

Or clone the repo to get all source files including build scripts:

1$ git clone git://github.com/xizon/fullstack-react-ssr-app-template.git

Step 2. First, using an absolute path into your "fullstack-react-ssr-app-template/" folder directory.

1$ cd /{your_directory}/fullstack-react-ssr-app-template

Step 3. Before doing all dev stuff make sure you have Node 10+ installed. After that, run the following code in the main directory to install the node module dependencies.

1$ sudo npm install

Step 4. Commonly used commands:

Debug application. It can be checked separately as TypeScript without compiling and packaging behavior.

1$ npm run check

To use webpack to bundle files.

1$ npm run build

Run the following commands for local testing and code inspection. You can see that the server is running. (Run the Express server only.). Using Ctrl + C to stop it.

1$ npm run dev

Step 5. When you done, this will spin up a server that can be accessed at

1http://localhost:3000

The new code is recommended to be bundled before debugging.

Step 6 (Optional). Unit Testing

1$ npm run test

💡 Note:

a) ERROR: npm update check failed.

Solution:

1$ sudo chown -R $USER:$(id -gn $USER) /Users/{username}/.config

b) ERROR: Node sass version 6.x.x is not compatible with ^ 4.x.x.

Solution:

1$ npm install node-sass@4.14.1

c) If you upgrade the version of Node, please execute the following code:

1$ sudo npm install
2$ sudo npm rebuild node-sass

Deploy on Custom Server

You can use PM2 to deploy to Nginx server, see the example poemkit

Contributing

Finding bugs, sending pull requests or improving our docs - any contribution is welcome and highly appreciated. To get started, head over to our contribution guidelines. Thanks!

Changelog

releases

Supported development environment

• React 17 +
• TypeScript 4.x.x +
• Babel 7.x.x +
• Webpack 5.x.x
• Jest 27.x.x
• Express 4.x.x

Licensing

Licensed under the MIT.