react parcel setup

.babelrc.json

{
  "parser": "babel-eslint",
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "env": {
    "browser": true,
    "jest": true,
    "es6": true
  }
}

package.json

{
  "name": "martian-playlist",
  "private": true,
  "version": "1.0.0",
  "description": "Martian Playlist React App",
  "main": "index.js",
  "repository": "git@github.com:MarsBased/martian-playlist.git",
  "authors": [
    "David García <david.garcia@marsbased.com>",
    "Daniel Gómez <daniel.gomez@marsbased.com>"
  ],
  "scripts": {
    "start": "NODE_ENV=development parcel src/index.html --open",
    "build": "yarn build:github",
    "build:github":
      "NODE_ENV=production parcel build src/index.html --public-url https://marsbased.github.io/martian-playlist/",
    "build:local":
      "NODE_ENV=production parcel build src/index.html --public-url ./",
    "precommit": "lint-staged",
    "predeploy": "yarn run build",
    "deploy": "yarn deploy:github",
    "deploy:github": "gh-pages -d dist",
    "cypress": "cypress open",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "test:eslint": "eslint src/ --ext .js --ext .jsx",
    "test:integration": "concurrently \"yarn start\" \"yarn cypress\" "
  },
  "lint-staged": {
    "*.{js,jsx,scss,json,css,md}": ["prettier --write", "git add"]
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
    },
    "collectCoverageFrom": ["src/**"]
  },
  "postcss": {
    "modules": false,
    "plugins": {
      "autoprefixer": {
        "browsers": [">1%", "last 4 versions", "Firefox ESR", "not ie < 9"],
        "flexbox": "no-2009"
      }
    }
  },
  "license": "MIT",
  "dependencies": {
    "@firebase/app": "^0.3.2",
    "@firebase/auth": "^0.5.2",
    "@firebase/firestore": "^0.5.2",
    "prop-types": "^15.6.1",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2"
  },
  "devDependencies": {
    "@marsbased/marstyle-stylelint": "^0.2.0",
    "autoprefixer": "^8.5.0",
    "babel-eslint": "^8.2.3",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "concurrently": "^3.5.1",
    "cypress": "^2.1.0",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "eslint": "^4.19.1",
    "eslint-plugin-react": "^7.8.2",
    "gh-pages": "^1.1.0",
    "husky": "^0.14.3",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^22.4.3",
    "lint-staged": "^7.1.0",
    "node-sass": "^4.9.0",
    "parcel-bundler": "^1.8.1",
    "parcel-plugin-bundle-visualiser": "^1.1.2",
    "prettier": "^1.12.1",
    "react-hot-loader": "^4.2.0"
  }
}

SETUP.md

Project Setup

Setup react with babel

yarn add react react-dom prop-types
yarn add --dev babel-preset-env babel-preset-react

In .babelrc:

{
  "presets": ["env", "react"]
}

Eslint

yarn add --dev eslint babel-eslint eslint-plugin-react

In .eslintrc.json:

{
  "parser": "babel-eslint",
  "extends": ["eslint:recommended", "plugin:react/recommended"]
}

Setup prettier

yarn add --dev lint-staged husky prettier

In package.json:

{
  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,json,css,md}": ["prettier --write", "git add"]
  }
}

Parcel

yarn add --dev node-sass parcel-bundler

In package.json:

{
  "start": "NODE_ENV=development parcel src/index.html --open",
  "build": "NODE_ENV=production parcel build src/index.html",
}

Autoprefixer:

yarn add --dev autoprefixer

In package.json:

  "postcss": {
    "modules": false,
    "plugins": {
      "autoprefixer": {
        "browsers": [">1%", "last 4 versions", "Firefox ESR", "not ie < 9"],
        "flexbox": "no-2009"
      }
    }
  },

Visualizer:

yarn add --dev parcel-plugin-bundle-visualiser

Hot reloading:

yarn add --dev react-hot-loader

At .babelrc:

{
  "plugins": ["react-hot-loader/babel"]
}

MarsCSS

yarn add --dev git+https://github.com/MarsBased/marscss.git/marscss

React router

yarn add react-router react-router-dom

Testing with react

• http://airbnb.io/enzyme/

yarn add --dev jest enzyme enzyme-adapter-react-16

Add scss mocks: (jestjs/jest#3094 and https://facebook.github.io/jest/docs/en/webpack.html)

 yarn add --dev identity-obj-proxy
 ```

 At package.json:

 ```
 {
  "jest":{
     "moduleNameMapper": {
      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
    },
 }

Firebase

yarn add firebase @firebase/firestore

Add src/firebase.js

Deployment

yarn add --dev gh-pages

At package.json:

(parcel-bundler/parcel#505)

{
 ...
 "scripts":{
  "build":
     "NODE_ENV=production parcel build src/index.html --public-url https://marsbased.github.io/martian-playlist/",
   "deploy": "gh-pages -d dist"
 },
}

High order components

yarn add hoist-non-react-statics

Cypress

yarn add --dev cypress