Skip to content

maratfakhreev/web-starter-kit

Repository files navigation

Web starter kit

Kick-start your new SPA including minimal building, testing, code formatting and linter tools.

Development tools

  • Babel as javascript compiler
  • Webpack/Wepback dev server as module bundler and http server
  • Eslint/Prettier as linting and formatting tools
  • Jest as testing framework
  • Husky/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

  1. 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
  1. Add @babel/preset-react to .babelrc.
{
  "presets": [
    //...,
    "@babel/preset-react"
  ]
}
  1. Add react recommended rules to .eslintrc.
{
  "extends": [
    //...,
    "plugin:react/recommended"
  ],
}
  1. Change wepback config entry point to index.jsx file.
const appConfig = {
  //...,
  entry: [path.resolve('app', 'index.jsx')],
}
  1. 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'));
  1. 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.

  1. 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
  1. Add @vue/babel-preset-jsx to .babelrc.
{
  "presets": [
    //...,
    "@vue/babel-preset-jsx"
  ]
}
  1. Add react recommended rules to .eslintrc.
{
  "extends": [
    //...,
    "plugin:vue/recommended"
  ],
}
  1. Change wepback config entry point to index.jsx file.
const appConfig = {
  //...,
  entry: [path.resolve('app', 'index.jsx')],
}
  1. 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 />;
  },
});

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published