npm package: @machtwatch/create-react-app
Description: Machtwatch React project generator
Author: Danny Reza Miloen
Latest version: 0.0.4

# Machtwatch FE Create React App 

<img alt="Logo" align="right" src="https://assets.jamtangan.com/images/icn/machtwatch-192.png" width="20%" />

Create SSR React apps with no build configuration.

- [Creating an App](#creating-an-app) – How to create a new app.
- [Development Guide](https://jamtangan.atlassian.net/) – How to develop apps bootstrapped with Machtwatch FE Create React App.
- [SSR Overview](https://jamtangan.atlassian.net/) – Explanation about Server Side Rendering.

Create React App works on macOS, Windows, and Linux.<br>
If something doesn’t work, please [file an issue](https://github.com/machtwatch/fe-create-react-app/issues/new).

## Quick Overview

There is 2 separated project template, including:

`Client facing project template`

```sh
npx @machtwatch/create-react-app my-app
cd my-app
```

`Internal tools project template`

```sh
npx @machtwatch/create-react-app my-app --dashboard
cd my-app
```

### Configuration (Local Machine)
- Copy Environment configuration file from .env.example to .env
```bash
$ cp .env.example .env
```
- Modify it based on your configuration preference

then run development script:
```sh
npm start
```

_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_

Then open [http://localhost:3000/](http://localhost:3000/) to see your app.<br>
When you’re ready to deploy to production, create a minified bundle with `npm run build`.

### Get Started Immediately

You **don’t** need to install or configure tools like webpack or Babel.<br>
They are preconfigured and hidden so that you can focus on the code.

Create a project, and you’re good to go.

## Creating an App

**You’ll need to have Node 10.16.0 or later version on your local development machine** (but it’s not required on the server). We recommend using the latest LTS version. You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to switch Node versions between different projects.

It will create a directory called `my-app` inside the current folder.<br>
Inside that directory, it will generate the initial project structure and install the transitive dependencies:

```
my-app
├── README.md
├── node_modules
├── package.json
├── Dockerfile
├── sonar-project-properties
├── .gitignore
├── .env.example
├── .editorconfig
├── .eslintrc
├── .eslintignore
├── .stylelintrc
├── .stylelintignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   ├── opensearch.xml
│   └── robots.txt
├── config
│   ├── default.js
│   ├── development.js
│   ├── production.js
│   ├── staging.js
│   └── test.js
└── src
    ├── assets
    ├── components
    ├── core
    ├── helpers
    ├── hooks
    ├── lang
    ├── middlewares
    ├── routes
    ├── styles
    ├── App.js
    ├── AppServer.js
    ├── client.js
    └── server.js
```

### `Source Project Overview`

`assets`
Local asset source (eg: images, vector, etc).

`components`
Local reusable component for the project.

`core`
Local core library configuration, including:
  - Apollo (Client consumer for graphql)
  - React context provider (see [React-Context-Api](https://reactjs.org/docs/context.html))
  - Reducer for handling global state

`lang`
Copywriting source for Internationalization.

`middlewares`
Local NodeJs server middleware.

`routes`
Root page / routes for this project.

`styles`
Global root style

`server.js`
Express file to be executed with core script

`AppServer.js`
Application middleware thats in charge to render the client root.

`client.js`
Client side root file.

`App.js`
Top level application file.


No configuration or complicated folder structures, only the files you need to build your app.<br>
Once the installation is done, you can open your project folder:

```sh
cd my-app
```

Inside the newly created project, you can run some built-in commands:

### `npm start` 

Runs the app in development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will automatically reload if you make changes to the code.<br>

### `npm test`

Runs the test watcher in an interactive mode.<br>
By default, runs tests related to files changed since the last commit.

[Read more about testing.](https://jamtangan.atlassian.net/)

### `npm run build`

Builds the app for production to the `build` folder.<br>
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.<br>

Your app is ready to be deployed.

## Philosophy

- **One Dependency:** There is only one build dependency. It uses webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them.

- **No Configuration Required:** You don't need to configure anything. A reasonably good configuration of both development and production builds is handled for you so you can focus on writing code.

## What’s Included?

Your environment will have everything you need to build a modern single-page React app:

- React, JSX, ES6, syntax support.
- CSS preprocessor ([LESS-css](https://lesscss.org/)) loader.
- Language extras beyond ES6 like the object spread operator.
- Autoprefixed CSS, so you don’t need `-webkit-` or other prefixes.
- A fast interactive unit test runner with built-in support for coverage reporting.
- A live development server that warns about common mistakes.
- A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.

## Contributing

We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started.