Parcel boilerplate

After clone or download go to root folder and in terminal run:

Yarn

yarn install

npm

npm i

to install node_modules

---

Used packages

---

Parcel - bundler

Parcel JS

installed package : parcel-bundler config file: .prettierrc

---

Prettier - format code

Prettier

installed package : prettier

NOTE: in VS Code settings set these conditions: Editor: format on save => true Prettier: require config => true

Then create .prettierrc. Empty brackets inside this file will initiate basic formatting setup. You can specify your preferable rules for prettier inside this brackets.

ATTENTION: from now on Prettier will format files ONLY if project will have .prettierrc file in root folder. If you want back VS Code standard behavior, set in setting Prettier: require config => false.

---

ESlint

installed package : eslint | eslint-config-prettier config file: .eslintrc

ESlint analyze possible problems in code. We don't need to run yarn lint command because linter will show problems automatically. We can run

ESlint

ESlint config

If you use VS Code you can install ESLint extension

TODO: parserOptions revision

    "ecmaFeatures": {
      "templateStrings": true,
      "arrowFunctions": true,
      "spread": true,
      "restParams": true,
      "defaultParams": true,
      "forOf": true
    }

eslint-config-prettier

eslint-config-prettier

As ESlint will try to fix code formatting this extension turn off all rules that are unnecessary or might conflict with Prettier that we have already installed for code formatting.

---

rimraf - rm -rf for node

rimraf

---

Browserlist

With build will Parcel transpile your code to support ALL browsers include IE_11. If we want to target only modern browsers we can use browserlist. With this toll Parcel will transpile our app code work seamlessly with specific range of browsers versions. It is always recommended to get research what versions is mainly used by our targeted audience. Here Im using standard last 2 versions of each browser.

browserl.ist

browserlist

---

BabelJS

babelJS
core
proposal-class-properties
preset-env
babel-eslint

---

OPTIONS

cross-env

cross-env

"dev:mock": "cross-env SOMETHING_MOCK=mock parcel public/index.html"

yarn dev:mock

npm run dev:mock

mock will never hit API and will work in offline mode. It will return list of random things.

Emotion

Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.

emotions

BarbaJS

BarbaJS

BarbaJS is a small (7kb minified and compressed) and easy-to-use library that helps you create fluid and smooth transitions between your website’s pages. It makes your website run like a SPA (Single Page Application) and help reduce the delay between your pages, minimize browser HTTP requests and enhance your user’s web experience.

BarbaJS can be used as router ;)