Setting Up a Front-end Using Vite + React + Firebase Hosting

Setting up an environment.

Something that can manage to make you feel excited yet demoralizing at the same time. It resembles the feeling when you get a new apartment knowing you have 50+ boxes to unpack.

But luckily, thanks to the new services and technology, it is easier than ever for us to set up and get our apps up and running on the web.
I've learned the easier way his over time, often by not finishing one project before jumping into another.

⚠️ Please do not expect this to be suitable for massive projects. It is intended for use with small to mid-sized projects or for prototyping.

Prerequisites

• You need to install node globally on your computer. Currently v18+ is a safer choice (My environment uses v18.16.0).

1 Set Up a Code Base

1.1. Scaffolding a Vite Project

Starting by running the Vite command:

npm create vite@latest

Then follow the prompts:

• Name your project with whatever name you prefer.
• Select a framework: React
• Select a variant: › TypeScript + SWC
• Navigate to the project directory and run npm install and npm run dev.

1.2. (Optional) Enable Absolute Import Path

This is an optional choice, but I personally dislike importing with relative paths, and it is always easier to configure it at the beginning..

Add this line into your tsconfig.json:

{
  "compilerOptions": {
    ...
    "baseUrl": "./src"
  },
  ...
}

And then let the Vite project know about your alias with adding these lines to vite.config.ts

export default defineConfig({
  ...
  resolve: {
    alias: {
      src: '/src',
    },
  },
})

Now you are able to import components like this:

import { Button } from 'src/components/Button';

1.3. Set up a Formatter

• Run: npm install --save-dev prettier eslint-config-prettier
• Create a config file: touch .prettierrc.yml

printWidth: 80
tabWidth: 2
singleQuote: true
semi: false

1.4 Set up Tailwind CSS

• Install: npm install --save-dev tailwindcss postcss autoprefixer
• Configure the template path at tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• Add the Tailwind directives to the master CSS index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

You only need the above to use Tailwind, but I love working with Tailwind UI, which requires some extra libraries:

• npm install --save @headlessui/react @heroicons/react
• npm install --save-dev @tailwindcss/forms

Okay, now you're done with setting up the working frontend.
Let's deploy it and publish them on the web!

2. Set Up Firebase Hosting

2.1 Create Your Project in Firebase

You first need to go to Firebase Console and create a project.
Here's an official documentation for that.
https://firebase.google.com/docs/web/setup

2.2 Initialize Your Application

First you need to install firebase-tools globally:
npm install -g firebase-tools

Then run this:
firebase login
This will launch a pop up to ask you to sign in.

Then you hit this command in the directory you created with the earlier step: firebase init

Then follow the prompts:

• Select Hosting and (optionally) set up GitHub Action deploys as a feature
• Select the project you just made
• Set dist as your public directory (WARNING: public is the default for firebase hosting, but it's easier to use dist if you're using Vite as that's the default output directory for Vite.)
• Answer yes when you're asked if you want to configure as a single-page app

2.3 Deploy

You need to use firebase sdk to deploy with a script:
npm install --save firebase

Then copy and paste config information. Your config info can be obtained on the console.

export const HOSTING_CONFIG = {
  apiKey: XXX,
  authDomain: XXX,
  projectId: XXX,
  storageBucket: XXX,
  messagingSenderId: XXX,
  appId: XXX,
}

Then initialize the firebase app using that config.
This can be done with any file, but I would recommend putting somewhere close to root like App.tsx or index.ts because that has to be processed first before you use any firebase feature.

    import { initializeApp } from 'firebase/app'
    import { HOSTING_CONFIG } from 'env/config'

    initializeApp(HOSTING_CONFIG);

Finally, add a script in your package.json

"scripts" : {
    ...
    "deploy": "tsc && vite build && firebase deploy --only hosting"
}

And that's it! 🎉

Once you hit npm run deploy in your terminal, you'll be able to see the default screen for Vite project.

Now all you have to do is finish your project...

Thanks for reading! Happy coding!🙌