Setting Up a Front-end Using Vite + React + Firebase Hosting
Tags: react, tutorial, firebase, vite
Published: 2023-09-18 05:57:39

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](https://nodejs.org/en) 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](https://vitejs.dev/guide/) 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`:
```json
{
  "compilerOptions": {
    ...
    "baseUrl": "./src"
  },
  ...
}
```

And then let the Vite project know about your alias with adding these lines to `vite.config.ts`
```typescript
export default defineConfig({
  ...
  resolve: {
    alias: {
      src: '/src',
    },
  },
})
```
Now you are able to import components like this:

```typescript
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`
```yaml
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`:
```javascript
/** @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`
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

You only need the above to use Tailwind, but I love working with [Tailwind UI](https://tailwindui.com/), 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](https://support.google.com/firebase/answer/7015592?hl=en#zippy=%2Cin-this-article).
```javascript
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.

```tsx
    import { initializeApp } from 'firebase/app'
    import { HOSTING_CONFIG } from 'env/config'
    
    initializeApp(HOSTING_CONFIG);
```

Finally, add a script in your `package.json`
```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!🙌