Build and deploy a Vue/React/Vanilla JS app with Parcel and GitHub pages
Tags: javascript, webdev, showdev, npm
Published: 2018-09-04 13:43:06

---
title: Build and deploy a Vue/React/Vanilla JS app with Parcel and GitHub pages
published: true
tags: JavaScript, webdev, showdev, npm
canonical_url: https://codewithhugo.com/build-and-deploy-a-vue/react/vanilla-js-app-with-parcel-and-github-pages/
---

Parcel allows us to bundle frontend applications with no configuration and GitHub pages affords us a way to deploy them for free.

Here’s how to use these two tools together to deploy a JavaScript application.

Full example of a repo deployed like this: [https://github.com/HugoDF/js-graphql-client-example](https://github.com/HugoDF/js-graphql-client-example), and see [https://codewithhugo.com/js-graphql-client-example/](https://codewithhugo.com/js-graphql-client-example/).

Or the repo with the demos: [https://github.com/HugoDF/parcel-gh-pages-deploy](https://github.com/HugoDF/parcel-gh-pages-deploy) and see [https://codewithhugo.com/parcel-gh-pages-deploy/](https://codewithhugo.com/parcel-gh-pages-deploy/).


- [Setting up parcel 📦](#setting-up-parcel)
- [Deploying for free 💸](#deploying-for-free)

> This was sent out on the [Code with Hugo newsletter](https://buttondown.email/hugo) last Monday.
> [Subscribe](https://buttondown.email/hugo) to get the latest posts right in your inbox (before anyone else).

## Setting up parcel 📦


`npm install --save-dev parcel`


Say you have an `index.html` and `client.js` in your root:`index.html`:

```html
<!doctype html>
<html class="no-js" lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Your site title</title>
    <meta name="description" content="Your site meta description">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>

  <body>
    <div id="app">
    <script src="./client.js"></script>
  </body>

</html>
```

`client.js`:

```js
const $app = document.querySelector('#app');
$app.innerText = 'Hello world';
```

Granted you don’t need to bundle this, but let’s say we do.

With npm 5+ you can run: `npx parcel index.html` (on old npm, `./node_modules/.bin/parcel index.html`).

Go to [http://localhost:1234](http://localhost:1234) or run the command with `--open` option (`npx parcel index.html --open`), you should see the following:

> Note the `./client.js` path that is relative to where the `index.html` is.

![Hello world Parcel](https://d2mxuefqeaa7sj.cloudfront.net/s_E9E094C7512204BB25ABDCD9DE0C74A2094E37B7E71EFEFC5F9B77F1E4873835_1533922372858_Screen+Shot+2018-08-10+at+18.32.24.png)

React and Vue single file components etc also work with simple `.babelrc` include and npm install of respectively [`babel-preset-react`](https://babeljs.io/docs/en/babel-preset-react.html) or [`babel-preset-vue`](https://github.com/vuejs/babel-preset-vue).

We can put the script in `package.json`:

```json
{
  "scripts": {
    "start": "parcel index.html"
  },
  "devDependencies": {
    "parcel": "^1.9.7"
  }
}
```

And run it with `npm start` which will do the same as we did with `npx` earlier.

## Deploying for free 💸

`npm install --save-dev gh-pages`

In `package.json`:If you’re building a repo that is not `USERNAME.github.io`:

```json
{
  "scripts": {
    "start": "parcel index.html",
    "predeploy": "rm -rf dist && parcel build index.html --public-url YOUR_REPO_NAME",
    "deploy": "gh-pages -d dist"
  },
  "devDependencies": {
    "gh-pages": "^1.2.0",
    "parcel": "^1.9.7"
  }
}
```

For our example that means:

```json
{
  "name": "parcel-gh-pages-deploy",
  "description": "Deploy a parcel app to GitHub pages",
  "scripts": {
    "start": "parcel index.html",
    "predeploy": "rm -rf dist && parcel build index.html --public--url /parcel-gh-pages-deploy",
    "deploy": "gh-pages -d dist"
  },
  "devDependencies": {
    "gh-pages": "^1.2.0",
    "parcel": "^1.9.7"
  }
}

```

If you _are_ building `USERNAME.github.io`, use the following `"``predeploy``"` instead:

```json
"predeploy": "rm -rf dist && parcel build index.html",
```

❤ GitHub Pages and Parcel.

For any questions let me know on Twitter [@hugo\_\_df](https://twitter.com/hugo__df).

[Pepi Stojanovski](https://unsplash.com/@timbatec?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge "Download free do whatever you want high-resolution photos from Pepi Stojanovski")