search

Falieson / planetx-boilerplate-rsksoa

MIT License
0 stars 2 forks source link

readme

planetx-boilerplate-rsksoa

Build Status Coverage Status Known Vulnerabilities

PlanetX flavor of react-starter-kit

CURRENT: n/a ~~ NEXT: v0.1.0, 2017/05/22 ~~ Created 2017/05/22

Documentation

Check out the wiki!

Requirements

File Structure

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
│   ├── /RSK/                   # React-Starter-Kit documentation
├── /licenses/                  # Licenses
├── /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
│   ├── /data/                  # GraphQL server schema and data models
│   ├── /routes/                # Pages/screens along with their routing information
│   ├── /modules/               # Modularized Components that haven't been extracted to their own repo yet
│   ├── /ui/                    # App specific React components that won't be modularized
│   ├── /client.js              # Client-side startup script
│   ├── /config.js              # Global application settings
│   └── /server.js              # Server-side startup script
├── /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
│   ├── /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
└── package.json                # The list of 3rd party libraries and utilities

Development

Tip: anytime you type npm or npm run you could use yarn instead

Dev Server

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.

$ npm install
$ npm run relay
$ npm run start

http://localhost:3000/ — Node.js server (build/server.js)
http://localhost:3000/graphql — GraphQL server and IDE
http://localhost:3001/ — BrowserSync proxy with HMR, React Hot Transform
http://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.

Development Process

Test & Prod Server

Prod Server (in dev environment)

Note that the npm 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:

$ npm start -- --release

Test Build

If you need just to build the app (without running a dev server), simply run:

$ npm run build

Production Build

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.

$ npm run build -- --release

Linting

The following scripts are available: