/ #Node #deployment 

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, and see https://example.codewithhugo.com/js-graphql-client-example/.

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

Table of Contents

This was sent out on the Code with Hugo newsletter last Monday. Subscribe 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:

<!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:

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 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

React and Vue single file components etc also work with simple .babelrc include and npm install of respectively babel-preset-react or babel-preset-vue.

We can put the script in package.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:

{
  "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:

{
  "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:

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

❤ GitHub Pages and Parcel.

For any questions let me know on Twitter @hugo__df.

unsplash-logoPepi Stojanovski

Looking for a new job? Take Triplebyte’s quiz and have top tech companies pitch you!

Author

Hugo Di Francesco

A Software Engineer and recovering Frontend Engineer who is big on Node.js, queues and Vue(s). He shares practical JavaScript tips for the developer who wants to get things done on Code with Hugo. University College London (UCL), MEng Mathematical Computation Graduate.

Subscribe for Enterprise Node.js and JavaScript Guides

Build your web platform with modern Node.js/JavaScript best-practices, tools and patterns