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.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.
Top comments (0)