/dev-toolkit

Development Toolkit for React Veterans

Primary LanguageJavaScriptISC LicenseISC

universal-dev-toolkit-logo

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
  • 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

Verify build

Verify if static build is working correctly.

# Runs a minimal server that serves the build folder (--static or --serve-static)
dev-toolkit --serve-static

Generate a static build with dynamic pages

To make use of dynamic pages and components for making your app load faster use the extended build command.

For advanced users only, refer to this gist for information on how to implement it.

# This will create an index-file for each dynamic route (-d --dynamic or --build --dynamic)
dev-toolkit --build --dynamic
  • html is pre-rendered and inserted into the body
  • 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
  • each subsequent page can be pre-cached and loaded on demand

Setting up tests

You'll need to import the webpack config for running tests, refer to this gist for the setup. You'll be able to write your tests in ES2015, just like the rest of your app. Single tests can also be run in a watch-mode with the npm run test-single-command.

Use server with server-side rendering

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

Compatibility
  • Multiplatform: Windows, OSX, Linux
  • Node.js last tested version 5.10.1
  • NPM last tested version 3.8.3
Javascript Basics
Developer Convenience
Powerful CSS Tools
Server-tools for Universal Apps

FAQ

  • I get an NPM warning after --init about eslint-import-resolver.

The package doesn't know that we're using webpack via the dev-toolkit and since webpack is not present in the dependencies, it throws an UNMET PEER DEPENDENCY-warning.

  • The dev-toolkit-package is not part of the dependencies of the starting point I created with --init.

Since you already installed dev-toolkit globally, it would be easier to work on multiple projects without reinstalling the dev-toolkit-dependencies for each project. This way when you update the toolkit with npm install -g dev-toolkit@version, all your projects are updated as well.

You can of course still pin your project with a specific version of the toolkit by running npm install --save-dev dev-toolkit inside your project folder.

Questions? Bugs? Suggestions? Create a new issue or submit a PR!
Check out the Contributing Guidelines for information on how to work on the toolkit itself.

kindly supported by BrowserStack.