react-starter-kit - GitLite

KO | EN

gitlite — search

#javascript #ai #typescript #golang #android #machine-learning #rust #docker #macos #java #kubernetes #awesome-list #openai #open-source

react-starter-kit

(★ 106)

No description available.

File Explorer

Download Latest Version (.zip)

- - example.json
- - index.js
- - commands.js
  - index.js
- tsconfig.json
- favicon.ico
- index.html
- manifest.json
- robots.txt
- - index.ts
- - configureStore.ts
- - app.scss
- App.tsx
- index.tsx
- react-app-env.d.ts
- reportWebVitals.ts
- service-worker.ts
- serviceWorkerRegistration.ts
- setupTests.ts
.dockerignore
.env-cmdrc
.eslintrc.js
.gitignore
.prettierrc.js
craco.config.js
cypress.json
Dockerfile
nginx.conf
package.json
README.md
tsconfig.json
tsconfig.paths.json
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/hoalongnatsu/react-starter-kit

Downloads the entire project code from GitHub to your computer.

cd react-starter-kit

Moves into the project folder you just downloaded.

2. Docker

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Docker Desktop Needed to build and run containers. Install it and keep it running in the background.

docker build -t react-starter-kit .

Builds a runnable image based on the Dockerfile.

docker run -p 8080:80 react-starter-kit

Runs the built image as an actual container.

✅ Run docker compose ps to check the containers are Up. If the README mentions a port, open http://localhost:PORT in your browser.

3. Node.js

Easy

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

yarn install

Downloads and installs the libraries listed in package.json.

yarn start:dev

Starts the development/run server.

yarn jest:testing

Type this command into your terminal and run it.

yarn cypress

Type this command into your terminal and run it.

+ yarn start:dev => load env in dev

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## Run source
```
yarn install
yarn start:dev
```
## Module structure
```bash
src/modules/Sample/
├── bootstraps.ts
├── config
│   └── constants.ts
├── pages
│   └── SamplePage.tsx
├── reducers
│   └── sample.ts
└── services
    └── sample.ts
```

bootstraps.ts
```javascript
import { ModuleConfig } from "@core/interfaces";
import { name as sample } from "@modules/Sample/reducers/sample";

const config: ModuleConfig = {
  name: "Sample", // name of the folder module
  baseUrl: "/sample", // base url
  routes: [
    {
      path: "/sample-page", // url of the page => http://example.com/sample/sample-page
      page: "SamplePage", // name of the file in pages folder
      title: "Sample Page", // title of the page
      exact: true, // config exact in Route of react-router-dom
      reducer: { // reducer config, single or array
        name: sample, // name of state in store
        resource: "sample" // name of the file in folder reducer
      }
    }
  ],
  requireAuthenticated: false // need login to access page or not. If value = "any", login or not login both can access
}

export default config;
```

config/constants.ts
```javascript
export const namespace = "namespace:sample"; // define namespace of module
```

reducers/sample.ts
```javascript
import { Action } from "redux";

interface SampleState {
}

const initialState: SampleState = {};

export const name = `${namespace}_sample`; // name of state in store, concat with namespace to prevent conflict state name with other namespace
export default function sample(state: SampleState = initialState, action: Action<string>) {
  switch (action.type) {
    default:
      return state;
  }
}
```

services/sample.ts
```javascript
import BaseService from "@core/class/BaseService";
import { Object } from "@core/interfaces";

class SampleService extends BaseService { // need to extends BaseService

list = (body: Object<string>) => {
    return this.get("/sample", body);
  }

}

export default new SampleService("/api", false);
```

## Testing
### Jest

```
yarn jest:testing
```

### Cypress

```
yarn cypress
```

## Config env file

Open .env-cmdrc file

```.env-cmdrc
{
  "dev": {
    "PORT": "3000",
    "REACT_APP_STAGE": "dev",
    "REACT_APP_API_URL": "http://localhost:3001",
    "REACT_APP_STORAGE_URL": "http://localhost:3001"
  },
  "testing": {
    "PORT": "3000",
    "REACT_APP_STAGE": "testing",
    "REACT_APP_API_URL": "http://localhost:3001",
    "REACT_APP_STORAGE_URL": "http://localhost:3001"
  }
}
```

Import env in src/configs/env.ts file

```src/configs/env.ts
export const CURRENT_ENV = {
  APP_STAGE: process.env.REACT_APP_STAGE,
  API_URL: process.env.REACT_APP_API_URL,
  STORAGE_URL: process.env.REACT_APP_STORAGE_URL,
};
```

**Env need prefix with REACT_APP_**

Use:
+ yarn start:dev => load env in dev
+ yarn start:testing => load env in testing

## Support Dockerfile for CI/CD

### Build and run test image with Jest

```
docker build . --target test -t md-frontend-test
docker run --rm -e FORCE_COLOR=true -e CI=true md-frontend-test jest:testing --verbose
```

### Test with cypress
Use image `cypress/browsers:node12.14.1-chrome85-ff81` for build image test.

```Dockerfile
FROM cypress/browsers:node12.14.1-chrome85-ff81
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
RUN npm ci
CMD ["yarn", cy:test""]
```