Starter Kit of server side render of react
npm install @aleleba/create-react-ssrThis project aims to have a starter kit for creating a new React app with Server Side Rendering and tools that generally go along with it.
It is not a project like create-react-app, create-react-app is used as a starter kit that handles all your scripts underneath, this is a project for developers who want more control over their application.
Tech(Library or Framework) | Version |
--- | --- |
React (Render Library) | 19.2.4
Redux (Global State Management) | 5.0.1
React Router DOM (Routing) | 7.13.0
Jest (Testing) | 30.2.0
Cypress (E2E Testing) | 15.10.0
Typescript | 5.9.3
npx @aleleba/create-react-ssr app-name
Then run:
cd app-name
You will need to create a new .env file at the root of the project for global config.
This is an exaple of config.
#Environment
ENV= #Default production
#App Port
PORT= #Default 80
#PUBLIC URL
PUBLIC_URL= #Default 'auto'
#Prefix URL
PREFIX_URL= #Default ''
#ONLY EXACT PATH
ONLY_EXACT_PATH= #Default false
The default environment is production, the app port defauld is 80 and the default public url is "auto", use prefix url if you want a prefix on base url, use exact path to validate if you want to have strict exact paths.$3
In the terminal run:
npm run start:dev
The ENV enviroment variable should be "development" and choose the port of your preference with the enviroment variable PORT.You will find the root component on:
scr/frontend/components/App.tsx
You will find the Initial Component on:
scr/frontend/components/InitialComponent.tsx
The manage of the routes you should find on:
scr/routes
It is using "useRoutes" hook for working, more information for this here: (https://reactrouter.com/docs/en/v6/api#useroutes)This will start the app in development mode, also it have Hot Reloading!
Enjoy coding!
$3
In the terminal run:
npm run build
It will create a build folder and run:
npm start