- Follow the getting started guide to download and run the project (Node.js >= 6.5)
- Check the code recipes used in this boilerplate, or share yours
- 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)
Before you start, take a moment to see how the project structure looks like:
.
├── /build/ # The folder for compiled output
├── /docs/ # Documentation files for the project
├── /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
│ ├── /components/ # React components
│ ├── /data/ # GraphQL server schema and data models
│ ├── /routes/ # Page/screen components along with the routing information
│ ├── /client.js # Client-side startup script
│ ├── /config.js # Global application settings
│ ├── /server.js # Server-side startup script
│ └── ... # Other core framework modules
├── /test/ # Unit and end-to-end tests
├── /tools/ # Build automation scripts and utilities
│ ├── /lib/ # Library for utility snippets
│ ├── /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
│ ├── /deploy.js # Deploys your web application
│ ├── /postcss.config.js # Configuration for transforming styles with PostCSS plugins
│ ├── /run.js # Helper function for running build automation tasks
│ ├── /runServer.js # Launches (or restarts) Node.js server
│ ├── /start.js # Launches the development web server with "live reload"
│ └── /webpack.config.js # Configurations for client-side and server-side bundles
├── Dockerfile # Commands for building a Docker image for production
├── package.json # The list of 3rd party libraries and utilities
└── yarn.lock # Fixed versions of all the dependencies
This will install both run-time project dependencies and developer tools listed in package.json file.
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
Node.js server (node build/server.js
) and Browsersync
with HMR on top of it.
https://localhost:3000/ — Node.js server (
build/server.js
)
https://localhost:3000/graphql — GraphQL server and IDE
https://localhost:3001/ — BrowserSync proxy with HMR, React Hot Transform
https://localhost:3002/ — BrowserSync control panel (UI)
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.
Note that the yarn start
command launches the app in development
mode,
the compiled output files are not optimized and minimized in this case.
You can use --release
command line argument to check how your app works
in release (production) mode:
$ yarn start -- --release
NOTE: double dashes are required
If you need just to build the app (without running a dev server), simply run:
$ yarn run build
or, for a production build:
$ yarn run build -- --release
or, for a production docker build:
$ yarn run build -- --release --docker
NOTE: double dashes are required
After running this command, the /build
folder will contain the compiled
version of the app. For example, you can launch Node.js server normally by
running node build/server.js
.
To check the source code for syntax errors and potential issues run:
$ yarn run lint
To launch unit tests:
$ yarn run test # Run unit tests with Mocha
$ yarn run test:watch # Launch unit test runner and start watching for changes
By default, Mocha test runner is looking for test files
matching the src/**/*.test.js
pattern. Take a look at src/components/Layout/Layout.test.js
as an example.
To deploy the app, run:
$ yarn run deploy
The deployment script tools/deploy.js
is configured to push the contents of
the /build
folder to a remote server via Git. You can easily deploy your app
to Azure Web Apps,
or Heroku this way. Both will execute yarn install --production
upon receiving new files from you. Note, you should only deploy the contents
of the /build
folder to a remote server.