UNPKG

5.54 kBMarkdownView Raw
1<h1 align="center">dev-toolkit</h1>
2<p align="center">
3Jump-start your <code>react</code>-powered Universal App<br />
4<em>Designed for Veterans</em>
5</p>
6<br />
7
8`dev-toolkit` provides you with an easy and quick way to get started with a pre-rendered & server-rendered app. After creating your starting point with the `init` command, you get full customisability out of the box.
9
10[![Travis branch](https://img.shields.io/travis/stoikerty/dev-toolkit/master.svg)](https://github.com/stoikerty/dev-toolkit)
11[![Vulnerabilities for dev-toolkit](https://snyk.io/test/github/stoikerty/dev-toolkit/badge.svg?targetFile=src%2Fpackages%2Fdev-toolkit%2Fpackage.json)](https://snyk.io/test/github/stoikerty/dev-toolkit?targetFile=src%2Fpackages%2Fdev-toolkit%2Fpackage.json)
12[![npm](https://img.shields.io/npm/v/dev-toolkit.svg)](https://www.npmjs.com/package/dev-toolkit)
13[![npm](https://img.shields.io/npm/dm/dev-toolkit.svg)](https://www.npmjs.com/package/dev-toolkit)
14[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
15[![Twitter](https://img.shields.io/twitter/url/https/github.com/stoikerty/dev-toolkit.svg?style=social)](https://twitter.com/intent/tweet?text=An%20easy%20and%20quick%20way%20to%20start%20a%20pre-rendered%20and%20server-rendered%20%23react%20app!%20https%3A%2F%2Fgithub.com%2Fstoikerty%2Fdev-toolkit)
16
17### Quick Start
18
19```bash
20$ npm install -g dev-toolkit
21```
22
23```bash
24# Initialise a project with optional name, template, comments
25# The comments explain how the `dev-toolkit` works with the template
26$ dev-toolkit init [project_name] [--template template_name] [--skip-comments]
27```
28
29#### List of available templates
30
31- [`minimal`](https://github.com/stoikerty/dev-toolkit/blob/master/docs/templates.md#minimal) [![Vulnerabilities for minimal template](https://snyk.io/test/github/stoikerty/dev-toolkit/badge.svg?targetFile=src%2Ftemplates%2Fminimal%2Fpackage.json)](https://snyk.io/test/github/stoikerty/dev-toolkit?targetFile=src%2Ftemplates%2Fminimal%2Fpackage.json)
32- [`standard`](https://github.com/stoikerty/dev-toolkit/blob/master/docs/templates.md#standard)* [![Vulnerabilities for standard template](https://snyk.io/test/github/stoikerty/dev-toolkit/badge.svg?targetFile=src%2Ftemplates%2Fstandard%2Fpackage.json)](https://snyk.io/test/github/stoikerty/dev-toolkit?targetFile=src%2Ftemplates%2Fstandard%2Fpackage.json)
33- [`with-eslint`](https://github.com/stoikerty/dev-toolkit/blob/master/docs/templates.md#with-eslint) [![Vulnerabilities for with-eslint template](https://snyk.io/test/github/stoikerty/dev-toolkit/badge.svg?targetFile=src%2Ftemplates%2Fwith-eslint%2Fpackage.json)](https://snyk.io/test/github/stoikerty/dev-toolkit?targetFile=src%2Ftemplates%2Fwith-eslint%2Fpackage.json)
34- [`with-sass`](https://github.com/stoikerty/dev-toolkit/blob/master/docs/templates.md#with-sass) [![Vulnerabilities for with-sass template](https://snyk.io/test/github/stoikerty/dev-toolkit/badge.svg?targetFile=src%2Ftemplates%2Fwith-sass%2Fpackage.json)](https://snyk.io/test/github/stoikerty/dev-toolkit?targetFile=src%2Ftemplates%2Fwith-sass%2Fpackage.json)
35
36<small>* used by default when initialising a new project</small>
37
38## 📖 Docs
39
40- [Templates](https://github.com/stoikerty/dev-toolkit/blob/master/docs/templates.md)
41
42## 🌟 Features
43
44`dev-toolkit` is intentionally minimalist on features. It's meant to get you started quickly with a project where you _will_ need customisability instead of mandating which technologies that you must use (such as Jest).
45
46* **SSR by default**
47* **Ability to pre-render** _after_ webpack creates a build
48* **Complete control over client & server**<br>
49 _see [template docs](https://github.com/stoikerty/dev-toolkit/blob/master/docs/templates.md)_
50* **Start your project without bloat** _or guidance_ if you like it rough<br>
51 _`dev-toolkit init --template minimal --skip-comments`_
52* **Full control over your server-rendered template**<br>
53 _no webpack lock-in such as with [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) unless you choose to_
54* **hot-reload on client & server**, opt-in for both
55* **Easy way to integrate any nodeHooks for SSR usage**<br>
56 _using `/nodeHooks.js`_
57* **Easy way to add webpack plugins and presets**<br>
58 _using `/dev-toolkit.config.js`_
59* **use select environment variables on client**<br>
60 _using `import { sharedEnvs } from 'dev-toolkit/settings'`_
61* **you can use sane if-statements, [jsx-control-statements](https://github.com/AlexGilleran/jsx-control-statements)**<br>
62 _`<If condition={true}> ... </If>` will compile down to `&&`-syntax_
63
64### Why No CSS by default?
65
66The aim of dev-toolkit is to be unopinionated so that it can be useful in many different scenarios. Therefore only the most necessary dependencies are included and other additions may be provided by yourself (see the other template examples for guidance).
67
68With CSS-in-JS solutions on the rise, it would be unwise to include dependencies for `css-modules`, `sass` or `less` in every project that has `dev-toolkit` as a dependency, it would introduce additional installation time and bloat.
69
70### Roadmap
71
72* More docs on extending with config, how dev-toolkit works, choices
73* serverless template
74* Using your own (external) template - under consideration
75* Eject feature - under consideration
76* list differences between dev-toolkit, next.js & create-react-app
77
78## Contributing
79See [`Contributing.md`](https://github.com/stoikerty/dev-toolkit/blob/master/Contributing.md)