DEV Community

Cover image for Build and deploy a Vue/React/Vanilla JS app with Parcel and GitHub pages
Hugo Di Francesco
Hugo Di Francesco

Posted on • Originally published at codewithhugo.com on

Build and deploy a Vue/React/Vanilla JS app with Parcel and GitHub pages

#javascript #webdev #showdev #npm

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>
Enter fullscreen mode Exit fullscreen mode

client.js:

const $app = document.querySelector('#app'); $app.innerText = 'Hello world';
Enter fullscreen mode Exit fullscreen mode

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" } }
Enter fullscreen mode Exit fullscreen mode

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" } }
Enter fullscreen mode Exit fullscreen mode

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" } }
Enter fullscreen mode Exit fullscreen mode

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

"predeploy": "rm -rf dist && parcel build index.html",
Enter fullscreen mode Exit fullscreen mode

❤ GitHub Pages and Parcel.

For any questions let me know on Twitter @hugo__df.

Pepi Stojanovski

Top comments (0)