2023-09-22 10:56:31 -06:00
# Create React SSR
2023-10-06 17:13:57 -06:00
This project aims to have a starter kit for creating a new React app with Server Side Rendering with a backend in go and tools that generally go along with it.
2023-09-22 10:56:31 -06:00
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) | 18.2.0
Redux (Global State Management) | 4.2.1
2023-10-17 12:56:22 -06:00
React Router DOM (Routing) | 6.17.0
2023-10-09 23:26:53 -06:00
Jest (Testing) | 29.7.0
2023-10-17 12:56:22 -06:00
Cypress (E2E Testing) | 13.3.1
2023-09-22 10:56:31 -06:00
Typescript | 5.2.2
## Setup
To create a new project run in the terminal:
```
2023-10-06 17:13:57 -06:00
npx @aleleba/create -react-go-ssr app-name
2023-09-22 10:56:31 -06:00
```
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
2023-10-06 22:42:03 -06:00
#Host
HOST= #Default localhost
2023-10-17 12:56:22 -06:00
#Prefix URL
PREFIX_URL= #Default ''
2023-10-06 21:39:22 -06:00
```
The default environment is production and the app port defauld is 80.
2023-09-22 10:56:31 -06:00
### For Development
In the terminal run:
```
2023-10-06 21:39:22 -06:00
npm run start-frontend:dev
npm run start-server:dev
2023-09-22 10:56:31 -06:00
```
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:
```
2023-10-06 21:39:22 -06:00
src/frontend/components/App.tsx
2023-09-22 10:56:31 -06:00
```
You will find the Initial Component on:
```
2023-10-06 21:39:22 -06:00
src/frontend/components/InitialComponent.tsx
2023-09-22 10:56:31 -06:00
```
The manage of the routes you should find on:
```
2023-10-06 21:39:22 -06:00
src/routes
2023-09-22 10:56:31 -06:00
```
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!
### For Production
In the terminal run:
```
npm run build
```
It will create a build folder and run:
```
npm start
```
This will start the app.
## Cheers
Hope you enjoy this proyect! Sincerely Alejandro Lembke Barrientos.