How to Setup a React Site with Parcel

#javascript #parcel #beginners

Parcel is zero configuration bundler. A bundler is something that will take your code and compile it all up for you into one file, and probably transform it in some way to make it more friendly to web browsers. Zero configuration means that once you've got parcel on your computer you just tell it to run and it just does its thing, no config file needed.

This is pretty great, especially when compared to a bundler like webpack that takes a little bit of work to set up and get running the way you want. If you want to read more about how a bundler works, or specifically webpack, check out my article on that here.

So let's talk about how to get started using Parcel.

First, let's install it globally, npm install -g parcel-bundler. Then we're going to need an empty directory to work in, so hop into one and run npm init -y to set up a package.json file. And let's grab React, cause we're using React, so run npm install --save react react-dom.

Then let's make just a basic file structure. We'll need an index.html and an index.js in our root directory and make them look like this respectively.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>To Do List Webpack Demo</title>
</head>

<body>
  <div id="app"></div>

  <script src="./index.js"></script>
</body>

</html>

import ReactDOM from 'react-dom';
import React from 'react';
import App from './src/app';

ReactDOM.render(<App />, document.getElementById('app'));

We'll also make a really simple app.js in our src folder.

import React from 'react';

const app = () => (
  <div class="app">
    This is my React app
  </div>
);

export default app;

Then we just can just run parcel index.html in our terminal and not only will Parcel compile our app, using the given file as an entry point, but it will also start up a live updating development server for us as well!

If you notice, Parcel automatically creates a dist folder for us, where it puts all of our compiled code. If you want a different folder, you can run parcel index.html -d build, just replace build with whatever you want the folder to be called.

Parcel also natively let's you import file types beyond just Javascript. You could add import './styles.css'; to get it it to bundle your css file with your Javascript code. But you can also import things like images and Parcel will grab them up as well. So if we change our app.js to look like this.

import React from 'react';
import Puppy from './assets/puppy.jpg';

const app = () => (
  <div class="app">
    <img src={Puppy} />
    This is my React app
  </div>
);

export default app;

It will bundle up the picture of my puppy that I put in my assets folder.

But maybe the thing I like most about Parcel right out of the box is that it includes the ability to use environment variables. Go ahead and add a .env file to your root directory, it has to be adjacent to you package.json. And put some variables in it, and Parcel will let you call them with process.env.

If you don't know what an environment variable is, it's a way to keep secret things secret. Let's say you want to access your database, but you don't want the whole internet to know your password, so put it in an environment variable and that way it won't be exposed to everyone who goes to your website.

So we could put something like MY_SECRET=password12345 in our .env file. And then in our app.js we could just call process.env.MY_SECRET anytime we want access to that variable and we don't have to install any other packages or dependencies.

Parcel has a lot of cool features which you can check out at their website. And it's definitely worth taking a look at because I've just scratched the surface here, but I hope you can see the advantage of a quick and easy to use bundler that requires no configuration to work great right out of the box.