/ #JavaScript #Node 

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

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

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

Author

Hugo Di Francesco

A developer, working out of London writing CSS, JavaScript and Python.

Subscribe to the Code with Hugo newsletter

Get the latest articles in your inbox every 2 weeks