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

fullstack-react-ssr-app-template/
├── README.md
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── ecosystem.config.js  #for pm2
├── babel.config.js
├── webpack.config.js
├── package-lock.json
├── package.json
├── test/
├── public/
│   ├── index.html
│   └── assets/
├── dist/
│   ├── css/
│   │   ├── app.css
│   │   ├── app.css.map
│   │   ├── app.min.css
│   │   └── app.min.css.map
│   └── js/
│   │   ├── app.js
│   │   ├── app.js.map
│   │   ├── app.min.js
│   │   └── app.min.js.map
├── src/
│   ├── client/
│   │   ├── client.js
│   │   ├── actions/
│   │   ├── reducers/
│   │   ├── router/
│   │   ├── components/   #Independent React components
│   │   ├── views/
│   │   │   ├── _pages/
│   │   │   └── _html/
│   └── server/
│   │   ├── app.js
│   │   ├── server.js
│   │   └── renderer.js
│   └── store/
│   │   └── createStore.js
└──

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.

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

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

$ 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.

$ 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.

$ sudo npm install

Step 4. Commonly used commands:

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

$ npm run check

To use webpack to bundle files.

$ 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.

$ npm run dev

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

http://localhost:3000

The new code is recommended to be bundled before debugging.

Step 6 (Optional). Unit Testing

$ npm run test

a) ERROR: npm update check failed.

Solution:

$ 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:

$ npm install [email protected]

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

$ sudo npm install
$ 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.