For this workshop you will need the following programs installed:
- Node.js: Install Node LTS from here
- Yarn: Follow the instructions here (we will use yarn over npm)
- Flask: in terminal run
pip install flask
- Google Cloud CLI: Select your operating system here and follow directions in
Before you begin.
- Firebase: Create an account on Firebase
To deploy your web application means to put it on a Web server so others can access it via the internet. We will be demonstrating how to deploy your projects (both frontend and backend) using Firebase.
We will be deploying our backend Flask app on Google Cloud Run. For the backend, we will be using the following sample Flask endpoint (refer to the backend workshop for more info):
- Navigate to Firebase and create a new project
- Initialize cloud storage and firestore
- Enable billing – it won’t actually charge you
- Navigate to Google Cloud Platform search for
Cloud Run API, and enable it
- Go to
IAMon the navigation bar on the left, and add the
cloud runpermissions to the
- Go to service accounts and under
actionscreate a new key for the same account – move this file to your project directory and name it
- First, you should have downloaded the gcloud command line interface (CLI) as per the pre-requisites
- In your project directory, type
gcloud auth loginand login with the same account used to create the project
gcloud config set project <project-id>
- Then, modify the provided
cloudbuild.yamlfile to use your project name in place of ours, and your developer account email instead of ours
gcloud builds submit --config cloudbuild.yaml .
You should get a link like https://todo-RANDOMHASH-uc.a.run.app/products. Copy/save this outputted URL because you will using this in the frontend API call.
For the frontend, we used the example code here taken from React docs here, but instead of declaring all the products in the
App component, we make a GET call to our backend
/products endpoint in the
FilterableProductTable to fetch the products list. The relevant changes are below:
In testing, we can add this line to
package.json to proxy our requests to a locally deployed backend:
The port is 8080 because our backend is running on port 8080 of localhost (equivalently, 0.0.0.0).
To deploy frontend to Firebase enter the following commands into terminal:
yarn build will create a
build directory containing a production build of your application.
firebase login will prompt you to log in by opening up a web browser if you're not already signed it.
firebase init will ask you the following questions:
- Which Firebase CLI features do you want to set up for this folder? Select Hosting.
- Associate with a Firebase project. Select your Firebase project
- What do you want as your public directory? build
- Configure as a single-page app (rewrite all urls to /index.html)? Yes
firebase deploy will push your build assets to Firebase remote server and give you a URL to your live Firebase app site! Now you can share this site and access it over the internet.