Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stoikerty/dev-toolkit
Universal Development Toolkit for Javascript People
https://github.com/stoikerty/dev-toolkit
autoprefixer browsersync css-modules react sass webpack
Last synced: 28 days ago
JSON representation
Universal Development Toolkit for Javascript People
- Host: GitHub
- URL: https://github.com/stoikerty/dev-toolkit
- Owner: stoikerty
- Created: 2015-01-29T09:58:55.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2024-05-14T02:11:19.000Z (6 months ago)
- Last Synced: 2024-05-15T04:24:16.249Z (6 months ago)
- Topics: autoprefixer, browsersync, css-modules, react, sass, webpack
- Language: JavaScript
- Homepage: https://npmjs.com/package/dev-toolkit
- Size: 2.71 MB
- Stars: 133
- Watchers: 7
- Forks: 12
- Open Issues: 85
-
Metadata Files:
- Readme: Readme.md
- Contributing: CONTRIBUTING.md
- Codeowners: CODEOWNERS
Awesome Lists containing this project
- -awesome-create-react-app - dev-toolkit - Development Toolkit for React Veterans. (Alternatives)
- awesome-create-react-app - dev-toolkit - Development Toolkit for React Veterans. (Alternatives)
README
dev-toolkit
Jump-start your react-powered Universal App
Designed for Veterans
`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.
*Note: Please be aware that this project will be phased out as by 2020 and I'm only making minor additions at this time. I'm happy for you to keep using `dev-toolkit` if you wish and will respond to important Issues or PR-requests but they won't be my top-priority. I suggest you switch to an alternative such as [Next.js](https://github.com/zeit/next.js) or [razzle](https://github.com/jaredpalmer/razzle).*
[](https://github.com/stoikerty/dev-toolkit)
[](https://snyk.io/test/github/stoikerty/dev-toolkit?targetFile=src%2Fpackages%2Fdev-toolkit%2Fpackage.json)
[](https://www.npmjs.com/package/dev-toolkit)
[](https://www.npmjs.com/package/dev-toolkit)
[](https://github.com/prettier/prettier)
[](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)
### Quick Start
```bash
$ npm install -g dev-toolkit
```
```bash
# Initialise a project with optional name, template, comments
# The comments explain how the `dev-toolkit` works with the template
$ dev-toolkit init [project_name] [--template template_name] [--skip-comments]
```
#### List of available templates
- [`minimal`](https://github.com/stoikerty/dev-toolkit/blob/master/docs/templates.md#minimal) [](https://snyk.io/test/github/stoikerty/dev-toolkit?targetFile=src%2Ftemplates%2Fminimal%2Fpackage.json)
- [`standard`](https://github.com/stoikerty/dev-toolkit/blob/master/docs/templates.md#standard)* [](https://snyk.io/test/github/stoikerty/dev-toolkit?targetFile=src%2Ftemplates%2Fstandard%2Fpackage.json)
- [`with-eslint`](https://github.com/stoikerty/dev-toolkit/blob/master/docs/templates.md#with-eslint) [](https://snyk.io/test/github/stoikerty/dev-toolkit?targetFile=src%2Ftemplates%2Fwith-eslint%2Fpackage.json)
- [`with-sass`](https://github.com/stoikerty/dev-toolkit/blob/master/docs/templates.md#with-sass) [](https://snyk.io/test/github/stoikerty/dev-toolkit?targetFile=src%2Ftemplates%2Fwith-sass%2Fpackage.json)
- [`serverless`](https://github.com/stoikerty/dev-toolkit/blob/master/docs/templates.md#serverless) [](https://snyk.io/test/github/stoikerty/dev-toolkit?targetFile=src%2Ftemplates%2Fserverless%2Fpackage.json)
* used by default when initialising a new project
## 📖 Docs
- [Templates](https://github.com/stoikerty/dev-toolkit/blob/master/docs/templates.md)
## 🌟 Features
`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).
* **SSR by default**
* **Ability to pre-render** _after_ webpack creates a build
* **Complete control over client & server**
_see [template docs](https://github.com/stoikerty/dev-toolkit/blob/master/docs/templates.md)_
* **Start your project without bloat** _or guidance_ if you like it rough
_`dev-toolkit init --template minimal --skip-comments`_
* **Full control over your server-rendered template**
_no webpack lock-in such as with [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) unless you choose to_
* **hot-reload on client & server**, opt-in for both
* **Easy way to integrate any nodeHooks for SSR usage**
_using `/nodeHooks.js`_
* **Easy way to add webpack plugins and presets**
_using `/dev-toolkit.config.js`_
* **use select environment variables on client**
_using `import { sharedEnvs } from 'dev-toolkit/settings'`_
* **you can use sane if-statements, [jsx-control-statements](https://github.com/AlexGilleran/jsx-control-statements)**
_` ... ` will compile down to `&&`-syntax_
### Compatibilty
Node.js `8.9.4` or higher suggested. You can use lower versions but you might not have arrow-functions or async/await support available. See [Node.js compatibility table](https://node.green/) for more information.
### Why No CSS by default?
The 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).
With 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.
## Contributing
See [`Contributing.md`](https://github.com/stoikerty/dev-toolkit/blob/master/Contributing.md)