{"id":13727069,"url":"https://github.com/tomtom94/react-easy-ssr","last_synced_at":"2025-05-07T22:30:50.021Z","repository":{"id":38003224,"uuid":"315674510","full_name":"tomtom94/react-easy-ssr","owner":"tomtom94","description":"🔥 React Starter Project with Webpack 5, Babel 7, TypeScript, Redux-saga, Styled-components, React-jss, Split code, Server Side Rendering.","archived":false,"fork":false,"pushed_at":"2024-01-26T12:47:12.000Z","size":3367,"stargazers_count":50,"open_issues_count":2,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-14T17:47:57.110Z","etag":null,"topics":["babel7","loadable-components","react","react-jss","redux-saga","ssr","styled-components","typescript","webpack5"],"latest_commit_sha":null,"homepage":"https://reacteasyssrjckf9fbl-reacteasyssrfront.functions.fnc.fr-par.scw.cloud","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tomtom94.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-11-24T15:30:06.000Z","updated_at":"2024-10-31T13:33:44.000Z","dependencies_parsed_at":"2024-02-04T19:43:59.364Z","dependency_job_id":null,"html_url":"https://github.com/tomtom94/react-easy-ssr","commit_stats":null,"previous_names":[],"tags_count":128,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomtom94%2Freact-easy-ssr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomtom94%2Freact-easy-ssr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomtom94%2Freact-easy-ssr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomtom94%2Freact-easy-ssr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomtom94","download_url":"https://codeload.github.com/tomtom94/react-easy-ssr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252965196,"owners_count":21832836,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel7","loadable-components","react","react-jss","redux-saga","ssr","styled-components","typescript","webpack5"],"created_at":"2024-08-03T01:03:38.293Z","updated_at":"2025-05-07T22:30:48.002Z","avatar_url":"https://github.com/tomtom94.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# ⚛ Ultra fast React boilerplate App (with SSR)\n\n\u003cimg src=\"https://s1.qwant.com/thumbr/0x0/a/6/0907f0dc9f264507f87bd9e432db837ad058c8e565a07897fd2194c0a0873c/react-logo.png?u=https%3A%2F%2Fdaviseford.com%2Fblog%2Fpublic%2Fimg%2Fthumbnails%2Fmisc%2Freact-logo.png\u0026q=0\u0026b=1\u0026p=0\u0026a=0\" width=\"100\" alt=\"react\"\u003e \u003cimg src=\"https://s2.qwant.com/thumbr/0x380/e/6/a169601f165c89b10d94397e1f14ec4ccf40aec54061944b7ea8fb673563a5/1*xQCjgB2DVqhtqGoGw9E6TQ.png?u=https%3A%2F%2Fmiro.medium.com%2Fmax%2F2400%2F1*xQCjgB2DVqhtqGoGw9E6TQ.png\u0026q=0\u0026b=1\u0026p=0\u0026a=0\" width=\"100\" alt=\"webpack\"\u003e \u003cimg src=\"https://s2.qwant.com/thumbr/0x0/7/8/a90851441b2db05ae94e2ab8bb05a95330f319896e6589f7fe3f59f91ec669/babel_logo_in_react_js_best_practices_2016-1453212218011.png?u=http%3A%2F%2Fblog-assets.risingstack.com%2F2016%2FJan%2Fbabel_logo_in_react_js_best_practices_2016-1453212218011.png\u0026q=0\u0026b=1\u0026p=0\u0026a=0\" width=\"120\" alt=\"babel\"\u003e \u003cimg src=\"https://s1.qwant.com/thumbr/0x0/8/7/13bf8174f749ce452e6efaff7b2da4da691d8a5d5069c35d7b33f2fe80776b/jss-logo-2B9BC9020D-seeklogo.com.png?u=https%3A%2F%2Fseeklogo.com%2Fimages%2FJ%2Fjss-logo-2B9BC9020D-seeklogo.com.png\u0026q=0\u0026b=1\u0026p=0\u0026a=0\" width=\"100\" alt=\"jss\"\u003e \u003cimg src=\"https://s1.qwant.com/thumbr/700x0/1/3/fadead1ef131e117581618fe92a6d62d674ab25d68b4f1772e100b69a3ea7a/Redux-Saga-Logo-Landscape.png?u=https%3A%2F%2Fraw.githubusercontent.com%2Fmskims%2Fredux-saga-in-korean%2Fmaster%2Flogo%2F0800%2FRedux-Saga-Logo-Landscape.png\u0026q=0\u0026b=1\u0026p=0\u0026a=0\" width=\"200\" alt=\"jss\"\u003e \u003cimg src=\"https://raw.githubusercontent.com/gregberge/loadable-components/master/resources/loadable-components.png\" width=\"100\" alt=\"jss\"\u003e\n\n\u003cimg src=\"https://cdn.jsdelivr.net/gh/Readme-Workflows/Readme-Icons@main/icons/gifs/wave.gif\" width=\"15\" alt=\"star github\"\u003e Hello, thanks to give me a star for this project.\n\n## Introduction\n\nReact App with SSR Server Side Rendering. Webpack 5 installed manually. In dev mode we use live reload thanks to `webpack-dev-middleware` \u0026 `webpack-hot-middleware` modules.\n\nMain modules used are `redux-saga`, `loadable-component`, `react-refresh`, `react-jss` and `typescript`.\n\n\u003cimg src=\"https://gifimage.net/wp-content/uploads/2017/10/new-icon-gif-animation-14.gif\" width=\"25\" alt=\"star github\"\u003e [Free and easy to use CI/CD](#Continuous-Integration-and-Continuous-Delivery) with Github Actions and Scaleway.\n\nCheck out this app in live [reacteasyssrjckf9fbl-reacteasyssrfront.functions.fnc.fr-par.scw.cloud](https://reacteasyssrjckf9fbl-reacteasyssrfront.functions.fnc.fr-par.scw.cloud)\n\n## Table of contents\n\n- [Motivations](#motivations)\n- [Getting started](#getting-started)\n  - [Requirements](#requirements)\n  - [Start in dev mode](#start-in-dev-mode)\n  - [Start in production mode](#start-in-production-mode)\n    - [With Node.js](#with-nodejs)\n    - [With Docker](#with-docker)\n- [Must know about the app](#must-know-about-the-app)\n  - [Continuous Integration and Continuous Delivery](#continuous-integration-and-continuous-delivery)\n  - [Checks to do sometimes](#checks-to-do-sometimes)\n  - [Components](#components)\n  - [Data-fetching and SSR](#data-fetching-and-ssr)\n  - [ES6 Imports possible in JSX](#es6-imports-possible-in-jsx)\n- [Notes](#notes)\n\n## Motivations\n\nAll this project is turned about SSR Server Side Rendering. And this is not an easy task. This boilerplate repository allows to overcome this work.\n\n## Getting started\n\nClone the repo\n\n```git\ngit clone https://github.com/tomtom94/react-easy-ssr.git\n```\n\n```git\ncd react-easy-ssr\n```\n\n### Requirements\n\nNode.js version v16.3.0 minimum (because we need to use the [js optional chaining operator](https://node.green/#ES2020)). Hopefully you got `nvm` command already installed (best way to install node), hence just do\n\n```nvm\nnvm use\n```\n\nit's gonna use the `.nvmrc` file with v16.20.0\n\n### Start in dev mode\n\nGet prepared with the env vars\n\n```sh\ncp .env-development .env\n```\n\n```npm\nnpm install\n```\n\nRun dev mode with\n\n```npm\nnpm run dev\n```\n\nit's gonna start an hot dev middleware with an express server ;) ready to work `http://localhost:3000`\n\n### Start in production mode\n\n#### With Node.js\n\n```npm\nnpm install\n```\n\nWrite in your server provider the environment variables `BACKEND_BASE_URL`\n\nRun build mode with\n\n```npm\nnpm run build\n```\n\nit's gonna build in `dist/`\n\nThen run in production mode\n\n```npm\nnpm run start\n```\n\n;) it's gonna start the only one SSR express server out of the box for internet `http://localhost:3000` or environment port used.\n\n#### With Docker\n\n```docker\ndocker build -t react-easy-ssr .\n```\n\n```docker\ndocker run -p 80:80 react-easy-ssr\n```\n\nThen open `http://localhost:80`\n\n## Must know about the app\n\nYou better use a good search engine like [Qwant.com](https://qwant.com), don't use Google. please.\n\n### Continuous Integration and Continuous Delivery\n\nWhen pushing or merging on master branch, you can trigger Github Actions with a commit message that includes `#major`, `#minor` or `#patch`.\n\nExample of commit message in order to start a deployment :\n\n```git\ngit commit -m \"#major this is a big commit\"\n```\n\n```git\ngit commit -m \"#minor this is a medium commit\"\n```\n\n```git\ngit commit -m \"#patch this is a tiny commit\"\n```\n\n### Checks to do sometimes\n\n- Check typescript `npm run tsc`\n- Check eslint `npm run lint`\n- Check prettier `npm run prettier`\n\n### Components\n\nThe main rule is we don't use a frontend framework. All components come from wherever we need it, but we are not stick to one. No need of `material-ui`, no need of `bootstrap` etc... However we are used to copy past source code from them. For example we made a copy past of the wonderfull `material-ui` `\u003cGrid /\u003e` which is so much powerful [check it out in this repo](https://github.com/tomtom94/react-easy-ssr/blob/master/src/components/Grid.tsx). We don't use many components that generate their own css stylesheet, because we need to control this carefully in order to make the famous SSR.\n\n`style-components` and `fontawesome` modules are also installed if ever you wanna use it. And yes we care of them for the SSR also.\n\nPlease note we don't use classical CSS style. We use [JSS](https://cssinjs.org/react-jss) (it means js in css). `material-ui` module also uses `react-jss` this is why we didn't installed `material-ui` else it would be stupid to generate twice the `react-jss` stylesheet on the SSR, and inefficiente to make an ultra fast App.\n\nEither you install `material-ui` and you make all your css components with it (which is recommended if you do this for big company), or you get free and install `react-jss` like we did.\n\n### Data-fetching and SSR\n\nLet's see how we fetch our data to feed our redux store. You can find this code in the `\u003cMovies /\u003e` [component](https://github.com/tomtom94/react-easy-ssr/blob/master/src/views/Movies/index.tsx).\n\n```react\nconst willMount = useRef(true)\nif (willMount.current \u0026\u0026 !process.env.BROWSER) {\n  dispatch(triggerMovies('GET_MOVIES'))\n  willMount.current = false\n}\n\nuseEffect(() =\u003e {\n  dispatch(triggerMovies('GET_MOVIES'))\n  return () =\u003e {\n    dispatch(clearMovies())\n  }\n}, [dispatch])\n```\n\n- 1st part is only for server side, we dispatch the redux action : with `useRef` you can be sure the action won't be triggered multiple times in an infinite loop.\n- 2nd part is only for client side, we dispatch the redux action : but when you trigger this action there is a [redux-saga selector](https://github.com/tomtom94/react-easy-ssr/blob/master/src/store/reducers/selectors.ts) which will check if data hasn't been already fetched during 1st part, if yes no need to fetch again. And we clear the error if there are some before leaving the component.\n\nThis way your App is able to fetch data on the server \u0026 client side independantly.\n\n### ES6 Imports possible in JSX\n\nWebpack setup only allows us to import files with ES6 in type\n\n- .js .jsx .ts .tsx\n- .png .jpe .jpeg .gif .ico\n- .woff .woff2\n- .css (remember `react-jss` generates its own stylesheet via its own plugins, not via webpack loaders)\n\nYou can add more Webpack `loader` to your project...\n\n## Notes\n\nIf ever you wanna brainstorm, download my resume you are gonna find my phone number\n\n- [thomasdeveloper-react.com](https://www.thomasdeveloper-react.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomtom94%2Freact-easy-ssr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomtom94%2Freact-easy-ssr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomtom94%2Freact-easy-ssr/lists"}