bunhere.com
Published on

[Recap Google IO 2024] and Deploy your web app with Firebase App Hosting

Hey there, web developers! 👋

I recently had the opportunity to speak at Google I/O Extended 2024 (Mien Trung), and I'm excited to share a recap of my talk on Firebase App Hosting – the next generation of serverless application development from Google.

This blog post will cover the basics of Firebase App Hosting and guide you through deploying your web app with ease. We'll also explore some exciting new web technologies that were highlighted at the event.

Firebase App Hosting: The Next Generation of Serverless

Firebase App Hosting is a powerful tool for deploying and managing web applications, simplifying the process and giving you more control over your code.

Firebase App Hosting

What's new in web?

Before diving into Firebase App Hosting, let's take a quick look at some of the latest web technology updates shared at Google I/O Extended:

1. Speculation Rules API: This innovative API utilizes logic rules to analyze data and predict page loading results. Think of it like anticipating your web browsing actions. As you hover your mouse over a link, the website pre-loads the potential destination in the background, ensuring a seamless experience when you click.

2. Chrome DevTools Update: Gemini: Gemini is a game-changer for web development, seamlessly integrated into Chrome DevTools to streamline code analysis and optimization. Gemini automatically analyzes your code during debugging, identifying potential issues, optimizations, and offering solutions for each problem.

3. Firebase Genkit: This open-source toolkit empowers developers to infuse their Javascript/Typescript applications with AI capabilities. Genkit simplifies the integration of AI features like automated content creation, translation, and intelligent search, making AI accessible to everyone.

Firebase App Hosting

Firebase App Hosting vs. Firebase Hosting: Understanding the Differences

While both are web hosting services from Firebase, they serve different purposes:

  • Firebase Hosting: Perfect for static websites and single-page applications. Content is stored and distributed as static files, making it ideal for simple websites, landing pages, or personal portfolios.

  • Firebase App Hosting: Designed for full-stack web apps built with frameworks like Angular, React, and Next.js. It supports server-side rendering (SSR) and seamlessly integrates with Firebase backend services like Cloud Functions and Cloud Firestore, making it suitable for complex applications with backend needs.

Demo: Deploying Your Next.js Web App with Firebase App Hosting

The best way to understand Firebase App Hosting is to use it. Let's walk through a basic deployment process:

1. Create a Next.js App with the Firebase Template

npm init next-on-firebase

2. Push Your Project to GitHub

Create a GitHub repository for your project (e.g., Firebase-hello-world).

3. Connect to Firebase

Navigate to the Firebase console (console.firebase.google.com) and choose "Create backend" under Firebase App Hosting. Connect to your GitHub repository.

connect to github

4. Explore the Firebase App Hosting Dashboard

Get familiar with the Firebase App Hosting dashboard, which provides valuable insights into deployments.

Success Deploy

Firebase will handle the build and deployment process, automating the entire workflow. You can easily track updates and rollbacks from the dashboard.

App Hosting Dashboard

Firebase App Hosting Dashboard: A Closer Look. The Firebase App Hosting dashboard offers a wealth of information:

  • Deployment Details: Track the latest deployment, including the commit, author, and domain name.
  • Deployment History (Rollouts): Monitor deployment history and understand the build and deploy process for each rollout.
  • Cloud Build and Cloud Run Logs: Gain insights into backend activities and troubleshoot issues using detailed Cloud Build and Cloud Run logs.

Recap

So, what did we learn today? Let's recap the key takeaways from our journey into Firebase App Hosting:

  • Creating a Next.js app with Firebase: We discovered how to kickstart a Next.js project with the power of npm init next-on-firebase.
  • Deploying to Firebase App Hosting and GitHub: We mastered the art of connecting your app to GitHub and deploying it seamlessly through Firebase App Hosting.
  • Understanding Deployment Rollouts: You're now equipped to monitor how deployments are triggered with every update on the main branch and how Firebase keeps your GitHub repo and app in sync.
  • Behind the Scenes with Cloud Build: We revealed how Cloud Build detects code changes in your Next.js source and builds container images for seamless deployment.
  • Debugging Backend Activity: You're ready to explore the Firebase App Hosting dashboard and delve into Cloud Run and build logs to track down and squash those pesky bugs.

Bonus:

  • Custom Domains: While we focused on the default Firebase domain for simplicity, remember that you can easily configure a custom domain for your app.
  • Environment Variables with apphosting.yaml: We touched upon using .env files for environment variables. But for Firebase App Hosting, you'll want to leverage the power of apphosting.yaml. This file is where you can set up custom CPU and memory limits, along with other configurations to optimize your app for scalability and performance.
# Settings for Cloud Run
runConfig:
  minInstances: 2
  maxInstances: 100
  concurrency: 100
  cpu: 2
  memoryMiB: 1024

# Environment variables and secrets
env:
  - variable: STORAGE_BUCKET
    value: mybucket.appspot.com
    availability:
      - BUILD
      - RUNTIME

  - variable: API_KEY
    secret: myApiKeySecret

Adding Generative AI to Your Next.js App

Let's briefly explore incorporating Generative AI into your Next.js application:

1. Install the Generative AI Library

npm i @google/generative-ai

2. Initialize and Use the Model:

const genAI = new GoogleGenerativeAI(API_KEY)
const model = genAI.getGenerativeModel({ model: "gemini-pro" })

const result = await model.generateContent(prompt)
const response = result.response
const text = response.text()

For more details about this section you can read the article Create a Tarot View app with the Gemini API again.

Conclusion

And that's a quick recap of all the content I shared recently at the Google I/O Extended Mien Trung event.

Firebase App Hosting offers a streamlined approach to deploying and managing your web applications. Take advantage of the powerful features and integrate generative AI to create even more engaging and dynamic applications.

Further Resources:

I am always looking for feedback on my writing, so please let me know what you think. ❤️

Share to: