_v5.2.6

Jump-start your react-powered Web App.
dynamic pages   sass & css-modules   server-rendering   hot-reload

Create a new project

# install & initialize new app
npm install -g dev-toolkit
dev-toolkit --init my_app
cd my_app

# run it via npm scripts
npm run dev
# or run it directly (-w or --watch)
dev-toolkit --watch

This will give you the following structure to work with:

src
├── client
│   ├── app.js
│   └── ...
└── server
    └── ...

Generate a static build

# Create `build`-folder with compiled files (-b or --build)
dev-toolkit --build

• removes previous build-folder
• generates static markup for React (coming soon)
• automatically uses production-builds of React and Redux
• allows for a custom vendor-bundle
• extracts css from individual modules
• hashes assets, including jpg, png, gif & svg-files

Generate a static build with dynamic pages

(coming soon)
To make use of dynamic pages and components for making your app load faster, follow the instructions and use the extended build command:

# This will create an index-file for each dynamic route (-d --dynamic or --build --dynamic)
dev-toolkit --build --dynamic

• creates multiple js-bundles, one for each dynamic page
• each index.html contains a script-link to the app bundle and the page-bundle
• scripts use async and defer-attributes as appropriate

---

Use server with server-side rendering

(experimental, coming soon)
You can use your project as an universal/isomorphic server-side-rendered app. For advanced users only.

# Compile and run `src/server/app` (-s or --serve)
dev-toolkit --serve

Misc

Check version

# Check Version (-v or --version)
dev-toolkit -v

Define what modules are bundled into vendor.js

// in your package.json, add `toolkitSettings` section
"toolkitSettings": {
  "vendor": [
    "react",
    "react-dom",
    "react-router"
  ]
},

---

Features

Javascript Basics

• React
• ES2015 / ES6
• root-relative imports with src/...
• ESLint

Developer Convenience

• Browsersync
• Vanilla HMR, webpack's hot-reload
• jsx-control-statements
• transform-class-properties support
• automatic asset-hashing during build, custom vendor.js
• support for various file-formats:
  css, scss
js, jsx, json
jpg, png, gif, svg

Powerful CSS Tools

• Autoprefixer
• sass / scss
• css-modules

Server-tools for Universal Apps

• your own server app in src/server/app
• powered by express
• react-router

---

Fancy working on the toolkit itself? This wiki could be useful to you.

---

_{kindly supported by BrowserStack.}