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.jspath that is relative to where theindex.htmlis.
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.
Get The Jest Handbook (100 pages)
Take your JavaScript testing to the next level by learning the ins and outs of Jest, the top JavaScript testing library.
orJoin 1000s of developers learning about Enterprise-grade Node.js & JavaScript
