valdman / react-easy-ssr

🔥 React Starter Project with Webpack 5, Babel 7, TypeScript, Redux-saga, Styled-components, React-jss, Split code, Server Side Rendering.

⚛ Ultra fast React boilerplate app (with SSR)

Hello, thanks to give me a star for this project.

Introduction

React App with SSR. Webpack 5 installed manually. In dev mode we use live reload thanks to webpack-dev-middleware & webpack-hot-middleware modules.

Main modules used are redux-saga, loadable-component, react-jss and Typescript.

Free and easy to use CI/CD with Github Actions and Heroku.

Check out this app in live react-easy-ssr.herokuapp.com

Table of contents

• Motivations
• Contributors and mainteners
• Getting started
  • Start in dev mode
  • Start in production mode
    • With Node.js
    • With Docker
• Must know about the app
  • Continious Integration with Github Actions
  • Checks to do sometimes
  • Components
  • ES6 Imports possible in JSX
  • Disadvantages of redux-saga and react-jss
  • I want to use renderToNodeStream to make a top notch app
• Notes

Motivations

Why do we make such a complicated setup ?

Well you can use a Framework to do all of this, but to me you are locking yourself behind walls. You can use Next.js or Gatsby.js but you will loose some powerful React functions.

React is a library, then I would say don't put yourself in a fucking framework. Which is great by the way ;)

Below the list of disadvantages of frameworks

• The React-routermodule : you won't be able to handle this wonderful module, hmmm so bad you can cry 😭 😭 😭
• You won't have access to what happens on the Server Side, hmmm so bad, just go to this page and you are done mate 😳 😳 😳
• According to Next.js you can just install redux-thunk not the other ones, hmmm so bad how can I play with redux-sagaor redux-observable ? 😡 😡 😡
• You are gonna use a upper-layer module of React. What happens if one of them make an upgrade but not the other one 😰 😰 😰 (this is the cold sweat smiley)
• You won't be able to touch the webpack compilation and all the parameters (what if you want to put the polyfills in dynamic imports because modern browsers don't need them you make win 119kb at opening time). How can you manage the complex module workbox-webpack-plugin to make a PWA, apparently it's already all done by Next.js look at that this messy code, I doubt it's done like you want. Look at this poor guy, it took him 2 years (from 2017 to 2019 lol) to make something special works with an easy webpack plugin check the github issue 😁 😁 😁
• You won't ever be able to use renderToNodeStream with Next.js & Gatsby.js forget it. You will only be able to use the old one React function renderToString, so bad just check this github issue on their roadmap and for Gatsby.js they are even not talking about this check their issues. To me you can't make a switch to use one function or the other just with a boolean parameter true or false. It'll need you to change a part of the architecture of the app, and also some modules you are using may not be compatible with (redux-saga and react-jss for example)
• Do you find other reasons why not to use a framework ? make a contribution and commit something here

I am making this because we need to make lobbying us, the developers. Upper-layer module of React are kind of side effect of open source community perfectionism. We are making upper-layer module of upper-layer module WTF ?

Getting started

Clone the repo

git clone https://github.com/tomtom94/react-easy-ssr.git

cd react-easy-ssr

Start in dev mode

npm install

Run dev mode with

npm run dev

it's gonna start an hot dev middleware with an express server ;) ready to work http://localhost:3000

Start in production mode

With Node.js

npm install

Write in your server provider the environment variables BACKEND_BASE_URL

Run build mode with

npm run build

it's gonna build in dist/

Then run in production mode

npm run start

;) it's gonna start the only one SSR express server out of the box for internet http://localhost:3000 or environment port used.

With Docker

docker build -t react-easy-ssr .

docker run -p 80:80 react-easy-ssr

Then open http://localhost:80

Must know about the app

You wanna work on the application ?

it's recommended to use prettier and eslint on you IDE (Visual Studio Code for example). Just note by default prettier don't touch .ts and .tsx extension files, you must make a speacial manipulation in Visual Studio Code in your settings.json.

You also better a good search engine like Qwant.com also.

Continious Integration with Github Actions

When pushing or merging a pull request on master branch, you can trigger the CI with a code included in the commit message, just use #major or #patch.

Example of commit message in order to start a deployment :

git commit -m "#major this is a big commit"

git commit -m "#patch this is a tiny commit"

In case you would like to delete the past bundles' static files you can add #flushstaticfiles

git commit -m "#patch #flushstaticfiles this is a tiny commit"

Checks to do sometimes

• Check typescript npm run tsc
• Check eslint npm run lint
• Check prettier npm run prettier

Components

The main rule is we don't use a frontend framework. All the components come from wherever we need it, but we are not stick to one. We are not stick to Material-ui, we are not stick to Bootstrap etc... However I am used to copy past source code of them. For example I made a copy past of the wonderfull Material-ui <Grid /> which is so much powerful check it out in this repo

However Styled-Components is also installed if ever you wanna use it. There also is fontawesome which is installed.

ES6 Imports possible in JSX

The Webpack setup only allows us to import files with ES6 in type

• .js .jsx .ts .tsx
• .png .jpe .jpeg .gif .ico
• .woff .woff2
• .css

But you can add more Webpack loader to your project

Please note we don't use classical CSS style. We use JSS (it means js in css).

Some disadvantages

• With this configuration can't use the powerful React function unveiled in 2018 called renderToNodeStream. We must use the old one which is (from 2015) rendeToString. But no worries bro 90% of React websites are on the old one. List of modules not compatible with renderToNodeStream (I am telling you the ones I am sure of, this is not a full list)

  • redux-saga check out this issue on github
  • react-jss check out this issue on github
  • redux-observable check out this issue on github

• Another big issue is the split code, this is normal behavior no worries ;). The first time your server (frontend) reads one of your page it'll be blind of redux actions. I can't explain you why but this is so much interesting try to investigate yourself (use Postman and check if you have data in your DOM, turn off and on your server check in Postman again) You wanna know more about this ? check out this issue on github. Hopefully we use the split code option webpackPrefetch which allows the server to read all the app by itself without having someone to open page per page. Understand this and you understand all about split code ;)

I want to use renderToNodeStream to make a top notch app

Well then you must use a redux-thunk and/or a apollographql which is gonna give you easy promises to handle on the server side. And don't use react-jss, just use a classical SASS, LESS or CSS style. And you are good to go

Notes

If ever you encounter issues during critical moment at work just contact me ASAP, download my resume you are gonna find my phone number

• thomasdeveloper-react.com