Web starter kit
Kick-start your new SPA including minimal building, testing, code formatting and linter tools.
Development tools
Babel
as javascript compilerWebpack/Wepback dev server
as module bundler and http serverEslint/Prettier
as linting and formatting toolsJest
as testing frameworkHusky/Lint staged
as tools for preventing bad commits into repository
Application tools
Axios
as library for http request. And I think that's all what you need :)
Disclamer
I really don't want to create another complicated, huge and framework specific boilerplate we have too much on the internet. It's more like a bunch of my favorite configs for rapid initialization of modern web app based on a framework and tools that you really need.
Also it doesn't include any tools for stylesheets because this is too project specialized part. Basically I prefer using styled-components
in React/Vue projects but for something small it's more easier to prepare css modules based on PostCSS and postcss-preset-env
for example.
Below I provide instructions how to make a React or Vue boilerplate just in 3 minutes. Because I'm a fun of jsx
and styled-components
both examples are based on these technologies.
Quick start
Clone application:
git clone git@github.com:maratfakhreev/web-starter-kit.git --origin web-starter-kit [MY-NEW-PROJECT]
cd [MY-NEW-PROJECT] && yarn install
Available commands:
yarn start # start the application with development environment and run webpack-dev-server
yarn build # build the application with production environment
yarn format # format code via prettier
yarn lint # lint code via eslint
yarn test # test code via jest
Setup minimal React based environment
- Install additional dependencies.
yarn add react react-dom react-router react-router-dom redux react-redux styled-components
yarn add --dev @babel/preset-react eslint-plugin-react
- Add
@babel/preset-react
to .babelrc.
{
"presets": [
//...,
"@babel/preset-react"
]
}
- Add react recommended rules to .eslintrc.
{
"extends": [
//...,
"plugin:react/recommended"
],
}
- Change wepback config entry point to
index.jsx
file.
const appConfig = {
//...,
entry: [path.resolve('app', 'index.jsx')],
}
- Use code like this in your
index.jsx
entry point.
import React from 'react';
import { render } from 'react-dom';
import Application from 'components/Application'; // root component
render(<Application />, document.getElementById('app'));
- If you want to set up test environment I'd suggest this guide
Setup minimal Vue based environment
You might find this idea a bit dumb to set up Vue with jsx
and styled-components
given that Vue goes better with "one file components" whereas the above-mentioned technics are commonly used in React. But I'm clearly convinced that soon more Vue projects will be using jsx as a template engine. Also I have a good experience using them in a complex Vue project and I'm pretty sure this approach may be of use. If you want to use Vue with common settings I can recommend this guide.
- Install additional dependencies.
yarn add vue vue-router vuex vue-styled-components
yarn add --dev @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props eslint-plugin-vue
- Add
@vue/babel-preset-jsx
to .babelrc.
{
"presets": [
//...,
"@vue/babel-preset-jsx"
]
}
- Add react recommended rules to .eslintrc.
{
"extends": [
//...,
"plugin:vue/recommended"
],
}
- Change wepback config entry point to
index.jsx
file.
const appConfig = {
//...,
entry: [path.resolve('app', 'index.jsx')],
}
- Use code like this in your
index.jsx
entry point.
import Vue from 'vue';
import Application from 'components/Application'; // root component
export default new Vue({
el: '#app',
render() {
return <Application />;
},
});