Using Firebase Emulator
In our Minimal Viable Product (MVP), we will be using Firebase Emulator to support local development. To use the Emulator, we will need to tie it to a Firebase project.
Linking to our Firebase project
Clone the repository to our local environment.
git clone git@gitlab.com:kaikokchew/fullstack.git
cd fullstack
ls -la
~/fullstack$ ls -la
total 76
drwxr-xr-x 7 user user 4096 Apr 8 15:52 .
drwxr-xr-x 63 user user 4096 Apr 4 16:23 ..
drwxr-xr-x 2 user user 4096 Apr 5 14:49 .firebase
-rw-r--r-- 1 user user 280 Apr 5 14:54 .firebaserc
drwxr-xr-x 7 user user 4096 Apr 7 22:37 .git
-rw-r--r-- 1 user user 1207 Apr 5 14:43 .gitignore
-rw-r--r-- 1 user user 1069 Apr 8 15:52 LICENSE
-rw-r--r-- 1 user user 22563 Apr 8 15:51 README.md
drwxr-xr-x 2 user user 4096 Apr 8 15:51 docs
-rw-r--r-- 1 user user 1323 Apr 4 16:26 firebase.json
-rw-r--r-- 1 user user 44 Apr 4 16:26 firestore.indexes.json
-rw-r--r-- 1 user user 163 Apr 4 16:26 firestore.rules
drwxr-xr-x 7 user user 4096 Apr 8 12:16 frontend
drwxr-xr-x 5 user user 4096 Apr 5 14:42 functions
~/fullstack$
Open and edit the firebase.json file and replace the placeholders with YOUR PROJECT UNIQUE ID.
{
"projects": {
"default": "<YOUR PROJECT UNIQUE ID>"
},
"targets": {
"<YOUR PROJECT UNIQUE ID>": {
"hosting": {
"production": [
"<YOUR PROJECT UNIQUE ID>"
],
"emulator": [
"<YOUR PROJECT UNIQUE ID>-emu"
]
}
}
},
"etags": {}
}
Environment Variables
The following are to be configured before we start.
Frontend Client
.env.emulator
VITE_SESSION_SERVICE_URL=http://127.0.0.1:5000/api/resources/session
VITE_LOGIN_URL=http://127.0.0.1:5000/api/auth/google
VITE_LOGOUT_URL=http://127.0.0.1:5000/api/resources/logout
VITE_USE_MOCK=true
VITE_MOCK_LOGIN_URL=http://127.0.0.1:5000/api/auth/mock
VITE_WEBAPP_NAME="<YOUR PROJECT NAME>"
Backend API Server
.env.local
PROJECT_ID=<YOUR PROJECT ID>
GOOGLE_SIGN_IN_CLIENT_ID=""
GOOGLE_SIGN_IN_CLIENT_SECRET=""
GOOGLE_SIGN_IN_REDIRECT_URI=http://127.0.0.1:5000/api/resources/google/callback
MODE=emulator
FIRESTORE_EMULATOR_HOST=localhost:8080
USE_MOCK=true
BASE_URL=http://127.0.0.1:5000/api
MAINPAGE_URL=http://127.0.0.1:5000
Building the application
The following steps install the dependencies for our software and build a first transpiled code for deployment to the emulator.
Backend API Server
Do the following to install dependencies.
cd functions
npm install
Output of installation.
added 720 packages, and audited 721 packages in 11s
127 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
~/fullstack/functions $
To build the backend server.
npm run build
cd ..
Output of build.
> build
> tsc
~/fullstack/functions$ cd ..
~/fullstack$
Frontend Client
Do the following to install dependencies.
cd frontend
npm install
Output of installation.
added 275 packages, and audited 276 packages in 7s
45 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
~/fullstack/frontend $
Build the frontend client.
npm run build
cd ..
Output of build.
> frontend@0.0.0 build
> tsc && vite build --outDir prod
vite v5.2.2 building for production...
✓ 412 modules transformed.
prod/index.html 0.46 kB │ gzip: 0.30 kB
prod/assets/index-CheykCXC.css 233.54 kB │ gzip: 31.77 kB
prod/assets/index-BNQj4NIX.js 274.87 kB │ gzip: 91.67 kB
✓ built in 2.40s
~/fullstack/frontend $ cd ..
~/fullstack $
Installing the Emulator
Install the emulator using the firebase CLI tool.
~/fullstack $ firebase init
And choose the emulators option.
And then choose the following emulators
- Functions
- Firestore
- Hosting
Once installed, we can start it with the following command.
firebase emulators:start
We should see the following output.
i emulators: Starting emulators: functions, firestore, hosting
⚠ functions: The following emulators are not running, calls to these services from the Functions emulator will affect production: auth, database, pubsub, storage
i firestore: Firestore Emulator logging to firestore-debug.log
✔ firestore: Firestore Emulator UI websocket is running on 9150.
i hosting[emulator]: Serving hosting files from: frontend/dist
✔ hosting[emulator]: Local server: http://127.0.0.1:5000
i hosting[production]: Serving hosting files from: frontend/prod
✔ hosting[production]: Local server: http://127.0.0.1:5005
i ui: Emulator UI logging to ui-debug.log
i functions: Watching "/home/user/fullstack1/functions" for Cloud Functions...
✔ functions: Using node@18 from host.
i functions: Loaded environment variables from .env, .env.local.
Serving at port 8804
✔ functions: Loaded functions definitions from source: api.
✔ functions[us-central1-api]: http function initialized (http://127.0.0.1:5001/YOUR_PROJECT_ID/us-central1/api).
┌─────────────────────────────────────────────────────────────┐
│ ✔ All emulators ready! It is now safe to connect your app. │
│ i View Emulator UI at http://127.0.0.1:4000/ │
└─────────────────────────────────────────────────────────────┘
┌───────────┬────────────────┬─────────────────────────────────┐
│ Emulator │ Host:Port │ View in Emulator UI │
├───────────┼────────────────┼─────────────────────────────────┤
│ Functions │ 127.0.0.1:5001 │ http://127.0.0.1:4000/functions │
├───────────┼────────────────┼─────────────────────────────────┤
│ Firestore │ 127.0.0.1:8080 │ http://127.0.0.1:4000/firestore │
├───────────┼──────────────── ┼─────────────────────────────────┤
│ Hosting │ 127.0.0.1:5000 │ n/a │
└───────────┴────────────────┴─────────────────────────────────┘
Emulator Hub running at 127.0.0.1:4400
Other reserved ports: 4500, 9150, 5005
Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.
The following services are available.
| SNO | Address | Description |
|---|---|---|
| 1 | http://127.0.0.1:4000/ | Emulator Main Console |
| 2 | http://127.0.0.1:4000/functions | Cloud Function Logs |
| 3 | http://127.0.0.1:4000/firestore | GUI console |
| 4 | http://127.0.0.1:5000 | Frontend Web App hosting and API reverse proxy |
| 5 | http://127.0.0.1:5005 | Production build Web App hosting. *Not used for emulation. |
| 6 | http://127.0.0.1:5001 | Backend API server. API should be accessed through reverse proxy instead. |
* avoids collision of 2 builds when working on both remote and local environment.
Note that to reload environment variables for backend, the cloud function emulator need to be restarted.
Reset/Seeding Data
Reset firestore
curl http://127.0.0.1:5000/api/dbreset
Seeding firestore
curl http://127.0.0.1:5000/api/dbseed
Testing the Environment
For the backend API server.
curl http://127.0.0.1:5000/api/hello
It should repond with an output.
~/fullstack$ curl http://127.0.0.1:5000/api/hello
Hello, Firebase! emulator
Visit the frontend app at local server, http://127.0.0.1:5000.
Notice that for emulation, the navbar banner color is changed to red to provide visual cue on the environment.