React Starter
Create single page applications with react.
Getting Started
Requirements
- Mac OS X, Windows, or Linux
- Yarn package + Node.js v6.5 or newer
- Text editor or IDE pre-configured with React/JSX/Flow/ESlint (learn more)
Directory Layout
.
├── /build/ # The folder for compiled output
├── /node_modules/ # 3rd-party libraries and utilities
├── /public/ # Static files which are copied into the /build/public folder
├── /src/ # The source code of the application
│ ├── /index.js # startup script
│ └── ... # Other core framework modules
├── /tools/ # Build automation scripts and utilities
│ ├── /lib/ # Library for utility snippets
│ ├── /config/ # Tools configurations
│ ├── /build.js # Builds the project from source to output (build) folder
│ ├── /bundle.js # Bundles the web resources into package(s) through Webpack
│ ├── /clean.js # Cleans up the output (build) folder
│ ├── /copy.js # Copies static files to output (build) folder
│ ├── /run.js # Helper function for running build automation tasks
│ ├── /runServer.js # Launches the production web server
│ └── /start.js # Launches the development web server with "live reload"
├── .env # .env variables to be loaded into Node process.env.
├── package.json # The list of 3rd party libraries and utilities
└── yarn.lock # Fixed versions of all the dependencies
Quick Start
1. Get the latest version
You can start by cloning the latest version of React Starter on your local machine by running:
$ git clone https://github.com/walid-mokrani/react-starter.git MyApp
$ cd MyApp
yarn install
2. Run This will install both run-time project dependencies and developer tools listed in package.json file.
Building and Serving the app
yarn start
(used for development)
This command will bundle the app from the source files (/src
) into memory as it was in the
/build
folder. As soon as the initial build completes, it will start the
Express dev server and Browsersync
with HMR on top of it.
Now you can open your web app in a browser, on mobile devices and start
hacking. Whenever you modify any of the source files inside the /src
folder,
the module bundler (Webpack) will recompile the
app on the fly and refresh all the connected browsers.
yarn serve
(used for production)
This command will build the app from the source files (/src
) into the output
/build
folder. As soon as the initial build completes, it will start the
Express server and Browsersync without live reload.
If you want to only serve the app without rebuilding it just add the --no-build
command line argument.
By default both yarn start
and yarn serve
starts the Express server
at PORT 3000 and opens automatically the browser at PORT + 1 (3001) using Browsersync.
If you don't need Browsersync just go to PORT 3000.
http://localhost:3000/ — Express server
http://localhost:3001/ — Express server With Browsersync
http://localhost:3002/ — Browsersync control panel (UI)
If the PORT 3000 is already taken, it will look for another one. Suppose the PORT 40003 is used
http://localhost:40003/ — Express server
http://localhost:40004/ — Express server With Browsersync
http://localhost:40005/ — Browsersync control panel (UI)
If you don't want to open the browser automatically add the --silent
argument to the command line.
yarn bundle
Compile the app with (Webpack) module bundler.
yarn build
Compile and copy all the necessary files to build a production ready app.
Note that all the commands listed above compile the app in development
mode,
the compiled output files are not optimised and minimised in this case.
You can use --release
command line argument to check how your app works
in release (production) mode.
The available arguments for the commands listed above (start, serve, bundle and build) are
--release
: Optimise and minimise the compiled output
--verbose
: Display more info into the console during the compilation phase
--analyse
: Open the Webpack Analyser
Examples
Serve the app without optimisations using HMR to speedup the development workflow
$ yarn start
Serve the app as close as possible to a release (production) version while keeping live reload
$ yarn start --release
Build an optimised production ready app and launch the Webpack Analyser
$ yarn build --release --analyse
Serve the production version (already present in the dist
folder) without rebuilding it and without opening the browser automatically
$ yarn serve --no-build --silent
Testing the app
yarn test
Run unit tests with Jest.
By default, Jest test runner is looking for test files
matching the src/**/*.test.js
pattern.
yarn test-watch
Launch unit test runner and start watching for changes.
yarn lint
Check the source code for syntax errors and potential issues.
yarn fix
Formatting syntax errors automatically.
For more commands, please see the scripts in package.json file.
.env files
It enables you to create custom Node environment variables that are embedded during the build time.
Please refer to Adding Custom Environment Variables for more info.