deploy.md

Deploying to GitHub Pages with parcel-bundler

Follow the steps below to deploy to GitHub Pages using parcel-bundler

1. Create a new branch called deployed-solution and switch to it.

2. Install parcel-bundler

   yarn add --dev parcel-bundler@1.12.5

3. Install gh-pages

   yarn add --dev gh-pages

4. Remove script tag with "./node_modules/axios/dist/axios.min.js" from index.html

5. Add import statements to index.js

   import 'regenerator-runtime/runtime';
   import axios from 'axios';

6. Add a "scripts" section to your package.json:

   "scripts": {
       "predeploy": "rm -rf dist && yarn run build",
       "deploy": "gh-pages -d dist",
       "test": "echo \"Error: no test specified\" && exit 1",
       "dev": "parcel index.html ",
       "build": "parcel build index.html --public-url /weather-report/"
   }

   Complete package.json

   {
       "dependencies": {
           "axios": "^0.27.2"
       },
       "devDependencies": {
           "gh-pages": "^4.0.0",
           "parcel-bundler": "^1.12.5"
       },
       "scripts": {
           "predeploy": "rm -rf dist && yarn run build",
           "deploy": "gh-pages -d dist",
           "test": "echo \"Error: no test specified\" && exit 1",
           "dev": "parcel index.html ",
           "build": "parcel build index.html --public-url /weather-report/"
       }
   }

7. Run yarn run deploy

8. Confirm that the GitHub Pages branch is set to gh-pages in the GitHub UI by going to Settings --> Pages --> Source

9. Navigate to https://{your-user-name}.github.io/weather-report/ to see your deployed site.

Resources

• How to Use Axios with Javascript
• How to publish a single page application at no cost with GitHub Pages (React, Svelte, etc)
• Parcel with gh-pages GitHub issue