A Quick Guide to Deploying a Parcel/React Project on Firebase 🎉

Introduction:
Parcel is a fast, zero-config web application bundler. When combined with React and Firebase hosting, it offers a smooth development-to-deployment flow. However, there are some steps and configurations you should be aware of. In this post, I'll walk you through deploying your Parcel/React project on Firebase.

Prerequisites:

• A React project set up with Parcel.
• Firebase CLI installed and authenticated.

Step-by-step Guide:

1. Update Your package.json

Add the following scripts to the scripts section of your package.json located in the root directory of your project:

//json
"scripts": {
    "clear-build-cache": "rm -rf .cache/ dist/",
    "dev": "parcel src/index.html",
    "build": "cross-env NODE_ENV=production parcel build ./src/index.html --public-url ./",
    "format": "prettier --write \"src/**/*.{js,jsx}\"",
    "lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
    "test": "echo \"Error: no test specified\" && exit 1"
}

A quick breakdown of these scripts:

dev: Runs your project locally.
clear-build-cache: Clears the .cache and dist directories before executing your build.
format: Runs prettier to format all your code files.
Ensure that the index.html path in the build script is accurate.

2. Clean the Build Cache
Either manually remove the dist and .cache files or use the script we just added:

npm run clear-build-cache

3. Build the Project

Execute the build command:

npm run build

This will generate the dist folder for your project.

4. Configure Firebase

Initialize Firebase in your project, ensuring the public directory in firebase.json points to the dist folder:

{
  "hosting": {
    "public": "dist/",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

5. Deploy to Firebase

Now, all that's left is to deploy your project:

firebase deploy

Conclusion:

Deploying a Parcel/React project to Firebase is straightforward with the right configurations in place. I hope this guide makes the process even simpler for you. If you found this helpful or have any questions, feel free to drop a comment below!🎉