React Boilerplate with Parcel and Babel 7
Tired of webpack config for setting up a React project? 😫
Try Parcel!
Parcel is a zero-config fast bundler. Everything just works out-of-the-box 🎉
Initialize npm
$ npm init -y
Install parcel
$ npm install --save-dev parcel-bundler
You can also install it globally if you're planning to run it as a CLI.
Create files
Here we have a vanilla HTML, CSS, JS and React setup. Nothing fancy 🍦
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href="./style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>
index.js
import React from "react";
import ReactDOM from "react-dom";
class Hello extends React.Component {
render() {
return (
<div>
<h1>Hello {this.props.name}</h1>
</div>
);
}
}
ReactDOM.render(<Hello name="Lenny" />, document.getElementById("app"));
style.css
body {
font-family: Arial, Helvetica, sans-serif;
}
Install React
$ npm install --save react
& npm install --save react-dom
Configure Babel 7
Since Babel 7, we have to use the @babel
-namespaced version of the presets
.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
Add npm scripts for dev and build
Parcel needs an entry point to start the build, which could be any file.
For simplicity, let's stick with our index.html
where the React app will be mounted
package.json
"scripts": {
"dev": "parcel index.html",
"build": "parcel build index.html"
},
Build dir
Default build dir is dist/
, but you can specify using -d
e.g. parcel build -d public/
Port
Default port is 1234, but you can specify yours using
--port
, e.g. parcel index.html --port 5000
Finally, ignore these files to not blow up your Git repo ✅
.gitignore
node_modules/
# parcel temp build files
.cache
dist
Run it!
$ npm install
$ npm run dev
Build and Deploy
Build
$ npm run build
Deploy
surge.sh is such an ease to use, but feel free to use any CLI-deploy tool you have.
$ npm install --global surge
$ surge dist/
Surge options
Surge takes a directory to deploy, which is dist/
since we left Parcel's default build dir.
It also asks you for a sub-domain name
💥
🙌 Awesome! Catch you in the next one! 🤓