Machtwatch FE Create React App

Create SSR React apps with no build configuration.

• Creating an App – How to create a new app.
• Development Guide – How to develop apps bootstrapped with Machtwatch FE Create React App.
• SSR Overview – Explanation about Server Side Rendering.

Create React App works on macOS, Windows, and Linux. If something doesn’t work, please file an issue.

Quick Overview

There is 2 separated project template, including:

Client facing project template

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

Internal tools project template

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

Configuration (Local Machine)

• Copy Environment configuration file from .env.example to .env

$ cp .env.example .env

• Modify it based on your configuration preference

then run development script:

npm start

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

Then open http://localhost:3000/ to see your app. 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. 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 (macOS/Linux) or nvm-windows to switch Node versions between different projects.

It will create a directory called my-app inside the current folder. 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)
• 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. Once the installation is done, you can open your project folder:

cd my-app

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

npm start

Runs the app in development mode. Open http://localhost:3000 to view it in the browser.

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

npm test

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

Read more about testing.

npm run build

Builds the app for production to the build folder. 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.

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) 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 for more information on what we're looking for and how to get started.