Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/shyam-chen/react-starter

:ram: A boilerplate for SPA Client with HTML5, React, and MUI on Webpack.
https://github.com/shyam-chen/react-starter

babel flow material react reactivex

Last synced: 2 months ago
JSON representation

:ram: A boilerplate for SPA Client with HTML5, React, and MUI on Webpack.

Host: GitHub
URL: https://github.com/shyam-chen/react-starter
Owner: Shyam-Chen
License: mit
Created: 2017-07-14T13:07:20.000Z (over 7 years ago)
Default Branch: main
Last Pushed: 2023-01-03T21:49:12.000Z (almost 2 years ago)
Last Synced: 2024-04-15T08:04:50.976Z (9 months ago)
Topics: babel, flow, material, react, reactivex
Language: JavaScript
Homepage:
Size: 5.36 MB
Stars: 37
Watchers: 7
Forks: 8
Open Issues: 15
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# React Starter

:ram: A boilerplate for React, Material, Babel, Flow, and ReactiveX.

## Table of Contents

- [Project Setup](#project-setup)
- [Key Features](#key-features)
- [Dockerization](#dockerization)
- [Configuration](#configuration)
- [Directory Structure](#directory-structure)

## Project Setup

Follow steps to execute this boilerplate.

### Install dependencies

```sh
$ yarn install
```

### Compiles and hot-reloads for development

```sh
$ yarn serve
```

### Compiles and minifies for production

```sh
$ yarn build
```

### Lints and fixes files

```sh
$ yarn lint
```

### Runs unit tests

Files: `src/**/*.spec.js`

```sh
$ yarn unit
```

### Runs end-to-end tests

Files: `e2e/**/*.spec.js`

```sh
# Before running the `e2e` command, make sure to run the following commands.
$ yarn build
$ yarn preview

# If it's not setup, run it.
$ yarn setup

$ yarn e2e
```

### Measures site's URLs

Files: `e2e/**/*.meas.js`

```sh
# Before running the `meas` command, make sure to run the following commands.
$ yarn build
$ yarn preview

# If it's not setup, run it.
$ yarn setup

$ yarn meas
```

### Mock requests

[`mock/requests`](./mock/requests) is a fork of [Koa-Starter](https://github.com/Shyam-Chen/Koa-Starter) that was made easy and quick way to run mock APIs locally.

```sh
# If it's not active, run it.
$ yarn active

$ yarn mock
```

## Key Features

This seed repository provides the following features:

- ---------- **Essentials** ----------
- [x] [React](https://github.com/facebook/react)
- [x] [React Router](https://github.com/ReactTraining/react-router)
- [ ] [React Intl](https://github.com/yahoo/react-intl)
- [x] [Recompose](https://github.com/acdlite/recompose)
- [x] [Redux](https://github.com/reduxjs/redux)
- [x] [Redux Thunk](https://github.com/reduxjs/redux-thunk)
- [x] [Reselect](https://github.com/reduxjs/reselect)
- [x] [Material UI](https://github.com/mui-org/material-ui)
- [x] [Axios](https://github.com/axios/axios)
- [ ] [Apollo GraphQL](https://github.com/apollographql)
- [x] [ReactiveX](https://github.com/ReactiveX/rxjs)
- ---------- **Tools** ----------
- [x] [Webpack](https://github.com/webpack/webpack)
- [x] [JSX](https://github.com/facebook/jsx)
- [x] [JSS](https://github.com/cssinjs/jss)
- [x] [Puppeteer](https://github.com/GoogleChrome/puppeteer)
- [x] [Babel](https://github.com/babel/babel)
- [x] [ESLint](https://github.com/eslint/eslint)
- [x] [Jest](https://github.com/facebook/jest)
- ---------- **Environments** ----------
- [x] [Node.js](https://nodejs.org/en/)
- [x] [Yarn](https://classic.yarnpkg.com/lang/en/)
- [ ] [Caddy](https://caddyserver.com/)
- [ ] [Netlify](https://www.netlify.com/)

## Dockerization

Dockerize an application.

1. Build and run the container in the background

```bash
$ docker-compose up -d
```

2. Run a command in a running container

```bash
$ docker-compose exec
```

3. Remove the old container before creating the new one

```bash
$ docker-compose rm -fs
```

4. Restart up the container in the background

```bash
$ docker-compose up -d --build
```

5. Push images to Docker Cloud

```diff
# .gitignore

.DS_Store
node_modules
npm
public
functions
coverage
+ dev.Dockerfile
+ stage.Dockerfile
+ prod.Dockerfile
*.log
```

```bash
$ docker login
$ docker build -f ./tools/.Dockerfile -t : .

# checkout
$ docker images

$ docker tag : /:
$ docker push /:

# remove
$ docker rmi :
# or
$ docker rmi
```

6. Pull images from Docker Cloud

```diff
# docker-compose.yml

:
- image:
- build:
- context: .
- dockerfile: ./tools/.Dockerfile
+ image: /:
volumes:
- yarn:/home/node/.cache/yarn
tty: true
```

## Configuration

### Project environments

Change to your project.

```js
// .firebaserc
{
"projects": {
"development": "",
"staging": "",
"production": ""
}
}
```

### Default environments

Set your local environment variables. (use `this. = process.env. || ;`)

```js
// env.js
function Environments() {
this.NODE_ENV = process.env.NODE_ENV || 'development';

this.PROJECT_NAME = process.env.PROJECT_NAME || '';

this.HOST_NAME = process.env.HOST_NAME || '0.0.0.0';

this.SITE_PORT = process.env.SITE_PORT || 8000;
this.SITE_URL = process.env.SITE_URL || `http://${this.HOST_NAME}:${this.SITE_PORT}`;

this.APP_BASE = process.env.APP_BASE || '/';

this.GOOGLE_ANALYTICS = process.env.GOOGLE_ANALYTICS || '';

this.SENTRY_DSN = process.env.SENTRY_DSN || null;
this.RENDERTRON_URL = process.env.RENDERTRON_URL || null;
}
```

### Deployment environment

Set your deployment environment variables.

```dockerfile
# tools/.Dockerfile

# envs --
ENV SITE_URL
ENV FUNC_URL
# -- envs
```

### CI environment

Add environment variables to the CircleCI build.

```yml
CODECOV_TOKEN
DOCKER_PASSWORD
DOCKER_USERNAME
FIREBASE_TOKEN
```

### SEO friendly

Enable billing on your Firebase Platform and Google Cloud the project by switching to the Blaze plan.

Serve dynamic content for bots.

```diff
// firebase.json
"rewrites": [
{
"source": "**",
- "destination": "/index.html"
+ "function": "app"
}
],
```

Deploy rendertron instance to Google App Engine.

```bash
$ git clone https://github.com/GoogleChrome/rendertron
$ cd rendertron
$ gcloud auth login
$ gcloud app deploy app.yaml --project
```

Set your rendertron instance in deployment environment.

```dockerfile
# tools/.Dockerfile

# envs --
ENV RENDERTRON_URL
# -- envs
```

### VS Code settings

The most basic configuration.

```js
{
"window.zoomLevel": 1,
"workbench.colorTheme": "Material Theme",
"workbench.iconTheme": "material-icon-theme",
"eslint.validate": [
"javascript", {
"language": "vue"
},
"javascriptreact",
"html"
],
"javascript.validate.enable": false,
"vetur.validation.script": false
}
```

## Directory Structure

The structure follows the LIFT Guidelines.

```coffee
.
├── src
│ ├── api
│ │ ├── __tests__
│ │ │ └── ...
│ │ ├── _ -> api of private things
│ │ │ └── ...
│ │ ├── core -> core feature module
│ │ │ └── ...
│ │ ├── -> feature modules
│ │ │ ├── __tests__
│ │ │ │ └── ...
│ │ │ ├── _ -> feature of private things
│ │ │ │ └── ...
│ │ │ └── ...
│ │ ├── -> module group
│ │ │ └── -> feature modules
│ │ │ ├── __tests__
│ │ │ │ └── ...
│ │ │ ├── _ -> feature of private things
│ │ │ │ └── ...
│ │ │ └── ...
│ │ ├── graphql
│ │ │ ├── -> feature modules
│ │ │ │ ├── __tests__
│ │ │ │ │ └── ...
│ │ │ │ ├── _ -> feature of private things
│ │ │ │ │ └── ...
│ │ │ │ └── ...
│ │ │ └── -> module group
│ │ │ └── -> feature modules
│ │ │ ├── __tests__
│ │ │ │ └── ...
│ │ │ ├── _ -> feature of private things
│ │ │ │ └── ...
│ │ │ └── ...
│ │ ├── shared -> shared feature module
│ │ │ └── ...
│ │ └── index.js
│ ├── app
│ │ ├── __tests__
│ │ │ └── ...
│ │ ├── _ -> app of private things
│ │ │ └── ...
│ │ ├── core -> core feature module
│ │ │ └── ...
│ │ ├── -> feature modules
│ │ │ ├── __tests__
│ │ │ │ ├── actions.spec.js
│ │ │ │ ├── .e2e-spec.js
│ │ │ │ ├── .spec.js
│ │ │ │ ├── .spec.js
│ │ │ │ ├── reducer.spec.js
│ │ │ │ └── selectors.spec.js
│ │ │ ├── _ -> feature of private things
│ │ │ │ └── ...
│ │ │ ├── actions.js
│ │ │ ├── constants.js
│ │ │ ├── .vue
│ │ │ ├── .js
│ │ │ ├── reducer.js
│ │ │ ├── selectors.js
│ │ │ └── types.js
│ │ ├── -> module group
│ │ │ └── -> feature modules
│ │ │ ├── __tests__
│ │ │ │ ├── actions.spec.js
│ │ │ │ ├── .e2e-spec.js
│ │ │ │ ├── .spec.js
│ │ │ │ ├── .spec.js
│ │ │ │ ├── reducer.spec.js
│ │ │ │ └── selectors.spec.js
│ │ │ ├── _ -> feature of private things
│ │ │ │ └── ...
│ │ │ ├── actions.js
│ │ │ ├── constants.js
│ │ │ ├── .js
│ │ │ ├── .js
│ │ │ ├── reducer.js
│ │ │ ├── selectors.js
│ │ │ └── types.js
│ │ ├── shared -> shared feature module
│ │ │ └── ...
│ │ ├── actions.js
│ │ ├── App.js
│ │ ├── constants.js
│ │ ├── epics.js
│ │ ├── reducer.js
│ │ ├── sagas.js
│ │ ├── selectors.js
│ │ └── types.js
│ ├── assets -> datas, fonts, images, medias
│ │ └── ...
│ ├── client.js
│ ├── index.html
│ └── server.js
├── tools
│ └── ...
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .firebaserc
├── .flowconfig
├── .gitignore
├── Dockerfile
├── LICENSE
├── README.md
├── circle.yml
├── docker-compose.yml
├── env.js
├── firebase.json
├── jest.config.js
├── package.json
├── webpack.config.js
└── yarn.lock
```