Skip to content

Latest commit

 

History

History
156 lines (121 loc) · 6.5 KB

getting-started.md

File metadata and controls

156 lines (121 loc) · 6.5 KB
Raw

Getting Started

Directory Layout

.
├── /build/                     # The folder for compiled output
├── /docs/                      # Documentation files for the project
├── /node_modules/              # 3rd-party libraries and utilities
├── /src/                       # The source code of the application
│   ├── /actions/               # Action creators that allow to trigger a dispatch to stores
│   ├── /components/            # React components
│   ├── /constants/             # Constants (action types etc.)
│   ├── /content/               # Static content (plain HTML or Markdown, Jade, you name it)
│   ├── /core/                  # Core framework and utility functions
│   ├── /data/                  # GraphQL server schema
│   ├── /decorators/            # Higher-order React components
│   ├── /public/                # Static files which are copied into the /build/public folder
│   ├── /routes/                # Page/screen components along with the routing information
│   ├── /stores/                # Stores contain the application state and logic
│   ├── /views/                 # Express.js views for index and error pages
│   ├── /client.js              # Client-side startup script
│   ├── /config.js              # Global application settings
│   ├── /routes.js              # Universal (isomorphic) application routes
│   └── /server.js              # Server-side startup script
├── /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

Requirements

  • Mac OS X, Windows, or Linux
  • Node.js v5.0 or newer
  • npm v3.3 or newer (new to npm?)
  • node-gyp prerequisites mentioned here
  • Text editor or IDE pre-configured with React/JSX/Flow/ESlint (learn more)

Quick Start

1. Get the latest version

You can start by cloning the latest version of React Starter Kit (RSK) on your local machine by running:

$ git clone -o react-starter-kit -b master --single-branch \
      https://github.com/kriasoft/react-starter-kit.git MyApp
$ cd MyApp

Alternatively, you can start a new project based on RSK right from WebStorm IDE, or by using Yeoman generator.

2. Run npm install

This will install both run-time project dependencies and developer tools listed in package.json file.

3. Run npm start

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.

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.

browsersync

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

How to Build, Test, Deploy

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

$ npm run build

or, for a production build:

$ npm run build -- --release

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:

$ npm run lint

To launch unit tests:

$ npm test

Test any javascript module by creating a __tests__/ directory where the file is. Append -test.js to the filename and Jest will do the rest.

To deploy the app, run:

$ npm 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 npm install --production upon receiving new files from you. Note, you should only deploy the contents of the /build folder to a remote server.

How to Update

If you need to keep your project up to date with the recent changes made to RSK, you can always fetch and merge them from this repo back into your own project by running:

$ git checkout master
$ git fetch react-starter-kit
$ git merge react-starter-kit/master
$ npm install