← Back
parcel react

Setup a project to create react apps with parcel

Hi,

I want to share how to create the boilerplate to build react applications with parcel.

This setup includes:

I plan to write another post about how to test react apps and, when marsscss is released, how to integrate marscss into the mix.

1. Project setup #

Let's start with basics:

mkdir my-react-app
cd my-react-app
mkdir src/
git init
echo '# My Awesome React App' > README.md

Then, create the project's npm package:

yarn init -y
echo 'node_modules/' > .gitignore

It's probably that we want to set the module private to prevent accidental publishing. Also, we're going to store all the files inside a src folder, so inside package.json write the following:

{
...
"private": true,
"main": "src/index.js"
}

2. Transpilation with babel #

We'll need to transpile the code for two reasons: convert JSX to javascript, and convert javascript features not supported by our target browsers into more standard JS. This two processes are covered by this two babel-preset packages:

yarn add --dev babel-preset-env babel-preset-react

The configuration is written inside a .babelrc.json file:

.babelrc.json:

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

The babel-preset-env allows to configure the target browsers we want to support, and it will transpile the code according to the javascript features available on that browsers. But the defaults are ok by now.

3. Linting with eslint #

A linter is a program that analyzes source code to detect possible errors and maintain coherence in the codebase. The babel-eslint package will allow our linter to parse JSX code, and the eslint-plugin-react includes the react related rules: yarn add --dev eslint babel-eslint eslint-plugin-react

The configuration goes inside .eslintrc.json:

.eslintrc.json:

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

I like to have a script to detect lint errors (in package.json):

package.json:

{
  "scripts": {
    "test:eslint": "eslint src/ --ext .js --ext .jsx"
  }
}

One handy feature of npm scripts is the ability to launch a script before another just by prepending "pre" to the name of the target script. You can run the linter before the "test" with this "pretest" script:

package.json:

{
  "scripts": {
    ...
    "pretest": "yarn run test:eslint"
  }
}

4. Format code with prettier #

We want to ensure before every commit that our source files have the same format. This can be done with a combination of prettier, husky and lint-staged: yarn add --dev lint-staged husky prettier

And then, in package.json:

package.json:

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

5. Build and development server with parcel #

We're ready to add parcel bundler to the mix:

yarn add --dev parcel-bundler

We need a script to start a development server and another to build our app:

package.json:

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

Note: this doesn't work on Windows (because the environment variables). If you need windows support take a look to cross-env.

If you are planning to deploy the compiled bundle you need to change the public-url parameter to point the root url of your app.

Finally, we don't want our compiled app to be on the git repository:

cat 'build/' >> .gitignore

6. Styles with sass and css autoprefixer #

Parcel comes with PostCSS support out of the box. PostCSS can be extended with other languages and preprocessors. Sass is our css language of choice, implemented via node-sass. autoprefixer it's a popular PostCSS plugin that add vendor css prefixes when required:

yarn add --dev node-sass autoprefixer

Configure it inside package.json:

package.json:

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

7. Hot code reloading #

Hot code reloading means that the browser will reload automatically the app when the code changes. It's a handy development feature (specially if you have two or more screens): yarn add --dev react-hot-loader

The react-hot-loader is implemented as a babel plugin, so we need to change .babelrc.json configuration:

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

And we need to change a little bit our source code. Let's suppose our index.js file is like this one:

import React from "react";
import { render } from "react-dom";
import App from "./App";

const root = document.getElementById("root");
render(<App />, el);

To enable hot code reloading we should change the above code into this:

/_ global module _/;
import React from "react";
import { render } from "react-dom";

const root = document.getElementById("root");

function renderApp() {
  const App = require("./App").default;
  render(<App />, root);
}

renderApp();

if (module.hot) {
  module.hot.accept(renderApp);
}

The first comment tells eslint to treat module as a global object instead of an undefined variable. The module.hot.accept function will invoke the renderApp function each time the code changes.

8. Deployment with gh-pages #

There are many ways to deploy a serverless app. The quick-and-dirty solution is use github pages: yarn add --dev gh-pages

And a couple of scripts:

{
  "scripts": {
    "predeploy": "yarn run build",
    "deploy": "gh-pages -d dist"
  }
}

Remember to change the url of the build script to match the root url of the app. For example:

{
  "scripts": {
    "build": "NODE_ENV=production parcel build src/index.html --public-url https://marsbased.github.io/my-awesome-app/"
  }
}

9. Create your awesome app #

Now the hardest thing is missing: code your app.