GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects â†’ Shyam-Chen â†’ React-Starter

Shyam-Chen / React-Starter

Licence: MIT license
🐏 A boilerplate for HTML5, React, Material, Babel, Flow, and Emotion. Redux | Thunk | Saga | Observable | Router | Recompose | Reselect | RxJS | Webpack 4 | ESLint | Jest | Puppeteer | Headless Chrome | Testing | Unit | E2E | REST | GraphQL | Apollo | Stateless | Babel | Flow | JSX | JSS | CSS in JS | React by Example

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
Dockerfile
14818 projects

Labels

reactbabelreactivexmaterial

Projects that are alternatives of or similar to React-Starter

Reactiveui.samples
This repository contains ReactiveUI samples.
Stars: ✭ 127 (+252.78%)
Mutual labels:  reactivex
Rxkotlinfx
Kotlin extensions to the RxJavaFX framework
Stars: ✭ 177 (+391.67%)
Mutual labels:  reactivex
BringMyOwnBeer-
PunkAPI(BrewDog) 을 이용한 RxSwift-MVVM 예제 (Naver Tech Concert)
Stars: ✭ 80 (+122.22%)
Mutual labels:  reactivex
Experiments
A repository to capture simple code experiments
Stars: ✭ 140 (+288.89%)
Mutual labels:  reactivex
Rxjava2 Extras
Utilities for use with RxJava 2
Stars: ✭ 167 (+363.89%)
Mutual labels:  reactivex
Reactive Examples
Samples App using the Reactive Extensions and Reactive UI
Stars: ✭ 203 (+463.89%)
Mutual labels:  reactivex
Vue Starter
🐩 A boilerplate for HTML5, Vue, Vue Router, i18n, Tailwind, Windi, Netlify, and Vite.
Stars: ✭ 120 (+233.33%)
Mutual labels:  reactivex
Pharmacist
Builds observables from events.
Stars: ✭ 221 (+513.89%)
Mutual labels:  reactivex
Deepspeech Server
A testing server for a speech to text service based on mozilla deepspeech
Stars: ✭ 176 (+388.89%)
Mutual labels:  reactivex
flutter-form-with-validation-BLOC
This form and validation functions are created by using the BLOC pattern with RxDart instead of using StatefulWidget
Stars: ✭ 63 (+75%)
Mutual labels:  reactivex
Monix
Asynchronous, Reactive Programming for Scala and Scala.js.
Stars: ✭ 1,819 (+4952.78%)
Mutual labels:  reactivex
Newbe.claptrap
This is a frameworks with reactive, event sourcing and Actor pattern as basic theories. On top of this, developers can create "distributed", "scale out", and "easy to test" application more simply. Claptrap and it`s Minions is on the way.
Stars: ✭ 163 (+352.78%)
Mutual labels:  reactivex
Rxcpp
Reactive Extensions for C++
Stars: ✭ 2,513 (+6880.56%)
Mutual labels:  reactivex
Ayanami
🍭 A better way to react with state
Stars: ✭ 129 (+258.33%)
Mutual labels:  reactivex
RxPager
RxPager is an Android library that helps handling paginated results in a reactive way
Stars: ✭ 56 (+55.56%)
Mutual labels:  reactivex
Fable.reaction
Fable Reaction - Reactive (AsyncRx) for F# Elmish and Fable
Stars: ✭ 122 (+238.89%)
Mutual labels:  reactivex
Rxkingfisher
Reactive extension for the Kingfisher image downloading and caching library
Stars: ✭ 190 (+427.78%)
Mutual labels:  reactivex
Hunch
Hunch provides functions like: All, First, Retry, Waterfall etc., that makes asynchronous flow control more intuitive.
Stars: ✭ 94 (+161.11%)
Mutual labels:  reactivex
go-graphql-subscription-example
☝️ go-graphql subscription over Kafka/Redis/NSQ example
Stars: ✭ 34 (-5.56%)
Mutual labels:  reactivex
Camelotia
Cross-platform .NET sample GUI app for cloud file management. Built with ReactiveUI, AvaloniaUI, Universal Windows Platform, Xamarin Forms, and WPF, runs on Windows, Linux, Mac and Android.
Stars: ✭ 221 (+513.89%)
Mutual labels:  reactivex
View All Similar Projects ➔

React Starter

🐏 A boilerplate for React, Material, Babel, Flow, and ReactiveX.

Table of Contents

Project Setup

Follow steps to execute this boilerplate.

Install dependencies

$ yarn install

Compiles and hot-reloads for development

$ yarn serve

Compiles and minifies for production

$ yarn build

Lints and fixes files

$ yarn lint

Runs unit tests

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

$ yarn unit

Runs end-to-end tests

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

# 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

# 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 is a fork of Koa-Starter that was made easy and quick way to run mock APIs locally.

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

$ yarn mock

Key Features

This seed repository provides the following features:

Dockerization

Dockerize an application.

  1. Build and run the container in the background
$ docker-compose up -d <SERVICE>
  1. Run a command in a running container
$ docker-compose exec <SERVICE> <COMMAND>
  1. Remove the old container before creating the new one
$ docker-compose rm -fs
  1. Restart up the container in the background
$ docker-compose up -d --build <SERVICE>
  1. Push images to Docker Cloud
# .gitignore

  .DS_Store
  node_modules
  npm
  public
  functions
  coverage
+ dev.Dockerfile
+ stage.Dockerfile
+ prod.Dockerfile
  *.log
$ docker login
$ docker build -f ./tools/<dev|stage|prod>.Dockerfile -t <IMAGE_NAME>:<IMAGE_TAG> .

# checkout
$ docker images

$ docker tag <IMAGE_NAME>:<IMAGE_TAG> <DOCKER_ID_USER>/<IMAGE_NAME>:<IMAGE_TAG>
$ docker push <DOCKER_ID_USER>/<IMAGE_NAME>:<IMAGE_TAG>

# remove
$ docker rmi <REPOSITORY>:<TAG>
# or
$ docker rmi <IMAGE_ID>
  1. Pull images from Docker Cloud
# docker-compose.yml

  <dev|stage|prod>:
-   image: <dev|stage|prod>
-   build:
-     context: .
-     dockerfile: ./tools/<dev|stage|prod>.Dockerfile
+   image: <DOCKER_ID_USER>/<IMAGE_NAME>:<IMAGE_TAG>
    volumes:
      - yarn:/home/node/.cache/yarn
    tty: true

Configuration

Project environments

Change to your project.

// .firebaserc
{
  "projects": {
    "development": "<PROJECT_NAME>",
    "staging": "<STAGE_PROJECT_NAME>",
    "production": "<PROJECT_NAME>"
  }
}

Default environments

Set your local environment variables. (use this.<ENV_NAME> = process.env.<ENV_NAME> || <LOCAL_ENV>;)

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

  this.PROJECT_NAME = process.env.PROJECT_NAME || '<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 || '<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.

# tools/<dev|stage|prod>.Dockerfile

# envs --
ENV SITE_URL <SITE_URL>
ENV FUNC_URL <FUNC_URL>
# -- envs

CI environment

Add environment variables to the CircleCI build.

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.

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

Deploy rendertron instance to Google App Engine.

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

Set your rendertron instance in deployment environment.

# tools/<dev|stage|prod>.Dockerfile

# envs --
ENV RENDERTRON_URL <RENDERTRON_URL>
# -- envs

VS Code settings

The most basic configuration.

{
  "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.

.
├── src
│   ├── api
│   │   ├── __tests__
│   │   │   └── ...
│   │   ├── _<THING>  -> api of private things
│   │   │   └── ...
│   │   ├── core  -> core feature module
│   │   │   └── ...
│   │   ├── <FEATURE>  -> feature modules
│   │   │   ├── __tests__
│   │   │   │   └── ...
│   │   │   ├── _<THING>  -> feature of private things
│   │   │   │   └── ...
│   │   │   └── ...
│   │   ├── <GROUP>  -> module group
│   │   │   └── <FEATURE>  -> feature modules
│   │   │       ├── __tests__
│   │   │       │   └── ...
│   │   │       ├── _<THING>  -> feature of private things
│   │   │       │   └── ...
│   │   │       └── ...
│   │   ├── graphql
│   │   │   ├── <FEATURE>  -> feature modules
│   │   │   │   ├── __tests__
│   │   │   │   │   └── ...
│   │   │   │   ├── _<THING>  -> feature of private things
│   │   │   │   │   └── ...
│   │   │   │   └── ...
│   │   │   └── <GROUP>  -> module group
│   │   │       └── <FEATURE>  -> feature modules
│   │   │           ├── __tests__
│   │   │           │   └── ...
│   │   │           ├── _<THING>  -> feature of private things
│   │   │           │   └── ...
│   │   │           └── ...
│   │   ├── shared  -> shared feature module
│   │   │   └── ...
│   │   └── index.js
│   ├── app
│   │   ├── __tests__
│   │   │   └── ...
│   │   ├── _<THING>  -> app of private things
│   │   │   └── ...
│   │   ├── core  -> core feature module
│   │   │   └── ...
│   │   ├── <FEATURE>  -> feature modules
│   │   │   ├── __tests__
│   │   │   │   ├── actions.spec.js
│   │   │   │   ├── <FEATURE>.e2e-spec.js
│   │   │   │   ├── <FEATURE>.spec.js
│   │   │   │   ├── <epics|sagas>.spec.js
│   │   │   │   ├── reducer.spec.js
│   │   │   │   └── selectors.spec.js
│   │   │   ├── _<THING>  -> feature of private things
│   │   │   │   └── ...
│   │   │   ├── actions.js
│   │   │   ├── constants.js
│   │   │   ├── <FEATURE>.vue
│   │   │   ├── <epics|sagas>.js
│   │   │   ├── reducer.js
│   │   │   ├── selectors.js
│   │   │   └── types.js
│   │   ├── <GROUP>  -> module group
│   │   │   └── <FEATURE>  -> feature modules
│   │   │       ├── __tests__
│   │   │       │   ├── actions.spec.js
│   │   │       │   ├── <FEATURE>.e2e-spec.js
│   │   │       │   ├── <FEATURE>.spec.js
│   │   │       │   ├── <epics|sagas>.spec.js
│   │   │       │   ├── reducer.spec.js
│   │   │       │   └── selectors.spec.js
│   │   │       ├── _<THING>  -> feature of private things
│   │   │       │   └── ...
│   │   │       ├── actions.js
│   │   │       ├── constants.js
│   │   │       ├── <FEATURE>.js
│   │   │       ├── <epics|sagas>.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
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].