{"id":16590655,"url":"https://github.com/shyam-chen/react-starter","last_synced_at":"2025-03-21T13:31:15.853Z","repository":{"id":22756401,"uuid":"97234817","full_name":"Shyam-Chen/React-Starter","owner":"Shyam-Chen","description":":ram: A boilerplate for SPA Client with HTML5, React, and MUI on Webpack.","archived":false,"fork":false,"pushed_at":"2023-01-03T21:49:12.000Z","size":5623,"stargazers_count":37,"open_issues_count":15,"forks_count":8,"subscribers_count":7,"default_branch":"main","last_synced_at":"2024-04-15T08:04:50.976Z","etag":null,"topics":["babel","flow","material","react","reactivex"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/Shyam-Chen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-14T13:07:20.000Z","updated_at":"2024-01-26T09:19:50.000Z","dependencies_parsed_at":"2023-01-14T09:45:19.186Z","dependency_job_id":null,"html_url":"https://github.com/Shyam-Chen/React-Starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shyam-Chen%2FReact-Starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shyam-Chen%2FReact-Starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shyam-Chen%2FReact-Starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shyam-Chen%2FReact-Starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Shyam-Chen","download_url":"https://codeload.github.com/Shyam-Chen/React-Starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244141599,"owners_count":20404835,"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":["babel","flow","material","react","reactivex"],"created_at":"2024-10-11T23:13:52.294Z","updated_at":"2025-03-21T13:31:15.500Z","avatar_url":"https://github.com/Shyam-Chen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Starter\n\n:ram: A boilerplate for React, Material, Babel, Flow, and ReactiveX.\n\n## Table of Contents\n\n- [Project Setup](#project-setup)\n- [Key Features](#key-features)\n- [Dockerization](#dockerization)\n- [Configuration](#configuration)\n- [Directory Structure](#directory-structure)\n\n## Project Setup\n\nFollow steps to execute this boilerplate.\n\n### Install dependencies\n\n```sh\n$ yarn install\n```\n\n### Compiles and hot-reloads for development\n\n```sh\n$ yarn serve\n```\n\n### Compiles and minifies for production\n\n```sh\n$ yarn build\n```\n\n### Lints and fixes files\n\n```sh\n$ yarn lint\n```\n\n### Runs unit tests\n\nFiles: `src/**/*.spec.js`\n\n```sh\n$ yarn unit\n```\n\n### Runs end-to-end tests\n\nFiles: `e2e/**/*.spec.js`\n\n```sh\n# Before running the `e2e` command, make sure to run the following commands.\n$ yarn build\n$ yarn preview\n\n# If it's not setup, run it.\n$ yarn setup\n\n$ yarn e2e\n```\n\n### Measures site's URLs\n\nFiles: `e2e/**/*.meas.js`\n\n```sh\n# Before running the `meas` command, make sure to run the following commands.\n$ yarn build\n$ yarn preview\n\n# If it's not setup, run it.\n$ yarn setup\n\n$ yarn meas\n```\n\n### Mock requests\n\n[`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.\n\n```sh\n# If it's not active, run it.\n$ yarn active\n\n$ yarn mock\n```\n\n## Key Features\n\nThis seed repository provides the following features:\n\n- ---------- **Essentials** ----------\n- [x] [React](https://github.com/facebook/react)\n- [x] [React Router](https://github.com/ReactTraining/react-router)\n- [ ] [React Intl](https://github.com/yahoo/react-intl)\n- [x] [Recompose](https://github.com/acdlite/recompose)\n- [x] [Redux](https://github.com/reduxjs/redux)\n- [x] [Redux Thunk](https://github.com/reduxjs/redux-thunk)\n- [x] [Reselect](https://github.com/reduxjs/reselect)\n- [x] [Material UI](https://github.com/mui-org/material-ui)\n- [x] [Axios](https://github.com/axios/axios)\n- [ ] [Apollo GraphQL](https://github.com/apollographql)\n- [x] [ReactiveX](https://github.com/ReactiveX/rxjs)\n- ---------- **Tools** ----------\n- [x] [Webpack](https://github.com/webpack/webpack)\n- [x] [JSX](https://github.com/facebook/jsx)\n- [x] [JSS](https://github.com/cssinjs/jss)\n- [x] [Puppeteer](https://github.com/GoogleChrome/puppeteer)\n- [x] [Babel](https://github.com/babel/babel)\n- [x] [ESLint](https://github.com/eslint/eslint)\n- [x] [Jest](https://github.com/facebook/jest)\n- ---------- **Environments** ----------\n- [x] [Node.js](https://nodejs.org/en/)\n- [x] [Yarn](https://classic.yarnpkg.com/lang/en/)\n- [ ] [Caddy](https://caddyserver.com/)\n- [ ] [Netlify](https://www.netlify.com/)\n\n## Dockerization\n\nDockerize an application.\n\n1. Build and run the container in the background\n\n```bash\n$ docker-compose up -d \u003cSERVICE\u003e\n```\n\n2. Run a command in a running container\n\n```bash\n$ docker-compose exec \u003cSERVICE\u003e \u003cCOMMAND\u003e\n```\n\n3. Remove the old container before creating the new one\n\n```bash\n$ docker-compose rm -fs\n```\n\n4. Restart up the container in the background\n\n```bash\n$ docker-compose up -d --build \u003cSERVICE\u003e\n```\n\n5. Push images to Docker Cloud\n\n```diff\n# .gitignore\n\n  .DS_Store\n  node_modules\n  npm\n  public\n  functions\n  coverage\n+ dev.Dockerfile\n+ stage.Dockerfile\n+ prod.Dockerfile\n  *.log\n```\n\n```bash\n$ docker login\n$ docker build -f ./tools/\u003cdev|stage|prod\u003e.Dockerfile -t \u003cIMAGE_NAME\u003e:\u003cIMAGE_TAG\u003e .\n\n# checkout\n$ docker images\n\n$ docker tag \u003cIMAGE_NAME\u003e:\u003cIMAGE_TAG\u003e \u003cDOCKER_ID_USER\u003e/\u003cIMAGE_NAME\u003e:\u003cIMAGE_TAG\u003e\n$ docker push \u003cDOCKER_ID_USER\u003e/\u003cIMAGE_NAME\u003e:\u003cIMAGE_TAG\u003e\n\n# remove\n$ docker rmi \u003cREPOSITORY\u003e:\u003cTAG\u003e\n# or\n$ docker rmi \u003cIMAGE_ID\u003e\n```\n\n6. Pull images from Docker Cloud\n\n```diff\n# docker-compose.yml\n\n  \u003cdev|stage|prod\u003e:\n-   image: \u003cdev|stage|prod\u003e\n-   build:\n-     context: .\n-     dockerfile: ./tools/\u003cdev|stage|prod\u003e.Dockerfile\n+   image: \u003cDOCKER_ID_USER\u003e/\u003cIMAGE_NAME\u003e:\u003cIMAGE_TAG\u003e\n    volumes:\n      - yarn:/home/node/.cache/yarn\n    tty: true\n```\n\n## Configuration\n\n### Project environments\n\nChange to your project.\n\n```js\n// .firebaserc\n{\n  \"projects\": {\n    \"development\": \"\u003cPROJECT_NAME\u003e\",\n    \"staging\": \"\u003cSTAGE_PROJECT_NAME\u003e\",\n    \"production\": \"\u003cPROJECT_NAME\u003e\"\n  }\n}\n```\n\n### Default environments\n\nSet your local environment variables. (use `this.\u003cENV_NAME\u003e = process.env.\u003cENV_NAME\u003e || \u003cLOCAL_ENV\u003e;`)\n\n```js\n// env.js\nfunction Environments() {\n  this.NODE_ENV = process.env.NODE_ENV || 'development';\n\n  this.PROJECT_NAME = process.env.PROJECT_NAME || '\u003cPROJECT_NAME\u003e';\n\n  this.HOST_NAME = process.env.HOST_NAME || '0.0.0.0';\n\n  this.SITE_PORT = process.env.SITE_PORT || 8000;\n  this.SITE_URL = process.env.SITE_URL || `http://${this.HOST_NAME}:${this.SITE_PORT}`;\n\n  this.APP_BASE = process.env.APP_BASE || '/';\n\n  this.GOOGLE_ANALYTICS = process.env.GOOGLE_ANALYTICS || '\u003cGOOGLE_ANALYTICS\u003e';\n\n  this.SENTRY_DSN = process.env.SENTRY_DSN || null;\n  this.RENDERTRON_URL = process.env.RENDERTRON_URL || null;\n}\n```\n\n### Deployment environment\n\nSet your deployment environment variables.\n\n```dockerfile\n# tools/\u003cdev|stage|prod\u003e.Dockerfile\n\n# envs --\nENV SITE_URL \u003cSITE_URL\u003e\nENV FUNC_URL \u003cFUNC_URL\u003e\n# -- envs\n```\n\n### CI environment\n\nAdd environment variables to the CircleCI build.\n\n```yml\nCODECOV_TOKEN\nDOCKER_PASSWORD\nDOCKER_USERNAME\nFIREBASE_TOKEN\n```\n\n### SEO friendly\n\nEnable billing on your Firebase Platform and Google Cloud the project by switching to the Blaze plan.\n\nServe dynamic content for bots.\n\n```diff\n// firebase.json\n    \"rewrites\": [\n      {\n        \"source\": \"**\",\n-       \"destination\": \"/index.html\"\n+       \"function\": \"app\"\n      }\n    ],\n```\n\nDeploy rendertron instance to Google App Engine.\n\n```bash\n$ git clone https://github.com/GoogleChrome/rendertron\n$ cd rendertron\n$ gcloud auth login\n$ gcloud app deploy app.yaml --project \u003cRENDERTRON_NAME\u003e\n```\n\nSet your rendertron instance in deployment environment.\n\n```dockerfile\n# tools/\u003cdev|stage|prod\u003e.Dockerfile\n\n# envs --\nENV RENDERTRON_URL \u003cRENDERTRON_URL\u003e\n# -- envs\n```\n\n### VS Code settings\n\nThe most basic configuration.\n\n```js\n{\n  \"window.zoomLevel\": 1,\n  \"workbench.colorTheme\": \"Material Theme\",\n  \"workbench.iconTheme\": \"material-icon-theme\",\n  \"eslint.validate\": [\n    \"javascript\", {\n      \"language\": \"vue\"\n    },\n    \"javascriptreact\",\n    \"html\"\n  ],\n  \"javascript.validate.enable\": false,\n  \"vetur.validation.script\": false\n}\n```\n\n## Directory Structure\n\nThe structure follows the LIFT Guidelines.\n\n```coffee\n.\n├── src\n│   ├── api\n│   │   ├── __tests__\n│   │   │   └── ...\n│   │   ├── _\u003cTHING\u003e  -\u003e api of private things\n│   │   │   └── ...\n│   │   ├── core  -\u003e core feature module\n│   │   │   └── ...\n│   │   ├── \u003cFEATURE\u003e  -\u003e feature modules\n│   │   │   ├── __tests__\n│   │   │   │   └── ...\n│   │   │   ├── _\u003cTHING\u003e  -\u003e feature of private things\n│   │   │   │   └── ...\n│   │   │   └── ...\n│   │   ├── \u003cGROUP\u003e  -\u003e module group\n│   │   │   └── \u003cFEATURE\u003e  -\u003e feature modules\n│   │   │       ├── __tests__\n│   │   │       │   └── ...\n│   │   │       ├── _\u003cTHING\u003e  -\u003e feature of private things\n│   │   │       │   └── ...\n│   │   │       └── ...\n│   │   ├── graphql\n│   │   │   ├── \u003cFEATURE\u003e  -\u003e feature modules\n│   │   │   │   ├── __tests__\n│   │   │   │   │   └── ...\n│   │   │   │   ├── _\u003cTHING\u003e  -\u003e feature of private things\n│   │   │   │   │   └── ...\n│   │   │   │   └── ...\n│   │   │   └── \u003cGROUP\u003e  -\u003e module group\n│   │   │       └── \u003cFEATURE\u003e  -\u003e feature modules\n│   │   │           ├── __tests__\n│   │   │           │   └── ...\n│   │   │           ├── _\u003cTHING\u003e  -\u003e feature of private things\n│   │   │           │   └── ...\n│   │   │           └── ...\n│   │   ├── shared  -\u003e shared feature module\n│   │   │   └── ...\n│   │   └── index.js\n│   ├── app\n│   │   ├── __tests__\n│   │   │   └── ...\n│   │   ├── _\u003cTHING\u003e  -\u003e app of private things\n│   │   │   └── ...\n│   │   ├── core  -\u003e core feature module\n│   │   │   └── ...\n│   │   ├── \u003cFEATURE\u003e  -\u003e feature modules\n│   │   │   ├── __tests__\n│   │   │   │   ├── actions.spec.js\n│   │   │   │   ├── \u003cFEATURE\u003e.e2e-spec.js\n│   │   │   │   ├── \u003cFEATURE\u003e.spec.js\n│   │   │   │   ├── \u003cepics|sagas\u003e.spec.js\n│   │   │   │   ├── reducer.spec.js\n│   │   │   │   └── selectors.spec.js\n│   │   │   ├── _\u003cTHING\u003e  -\u003e feature of private things\n│   │   │   │   └── ...\n│   │   │   ├── actions.js\n│   │   │   ├── constants.js\n│   │   │   ├── \u003cFEATURE\u003e.vue\n│   │   │   ├── \u003cepics|sagas\u003e.js\n│   │   │   ├── reducer.js\n│   │   │   ├── selectors.js\n│   │   │   └── types.js\n│   │   ├── \u003cGROUP\u003e  -\u003e module group\n│   │   │   └── \u003cFEATURE\u003e  -\u003e feature modules\n│   │   │       ├── __tests__\n│   │   │       │   ├── actions.spec.js\n│   │   │       │   ├── \u003cFEATURE\u003e.e2e-spec.js\n│   │   │       │   ├── \u003cFEATURE\u003e.spec.js\n│   │   │       │   ├── \u003cepics|sagas\u003e.spec.js\n│   │   │       │   ├── reducer.spec.js\n│   │   │       │   └── selectors.spec.js\n│   │   │       ├── _\u003cTHING\u003e  -\u003e feature of private things\n│   │   │       │   └── ...\n│   │   │       ├── actions.js\n│   │   │       ├── constants.js\n│   │   │       ├── \u003cFEATURE\u003e.js\n│   │   │       ├── \u003cepics|sagas\u003e.js\n│   │   │       ├── reducer.js\n│   │   │       ├── selectors.js\n│   │   │       └── types.js\n│   │   ├── shared  -\u003e shared feature module\n│   │   │   └── ...\n│   │   ├── actions.js\n│   │   ├── App.js\n│   │   ├── constants.js\n│   │   ├── epics.js\n│   │   ├── reducer.js\n│   │   ├── sagas.js\n│   │   ├── selectors.js\n│   │   └── types.js\n│   ├── assets  -\u003e datas, fonts, images, medias\n│   │   └── ...\n│   ├── client.js\n│   ├── index.html\n│   └── server.js\n├── tools\n│   └── ...\n├── .babelrc\n├── .editorconfig\n├── .eslintrc\n├── .firebaserc\n├── .flowconfig\n├── .gitignore\n├── Dockerfile\n├── LICENSE\n├── README.md\n├── circle.yml\n├── docker-compose.yml\n├── env.js\n├── firebase.json\n├── jest.config.js\n├── package.json\n├── webpack.config.js\n└── yarn.lock\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshyam-chen%2Freact-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshyam-chen%2Freact-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshyam-chen%2Freact-starter/lists"}