Build a serverless chat app with Svelte and Firebase! (PART 4)

Hey! Welcome back! We're done with our chat app, now to show it to the world!

Firebase, the BaaS we're using, can also HOST your website for you! How cool is that? While you could use another host like vercel or netlify, or even set up your own server, you should choose Firebase hosting for two reasons: 1) It requires *almost* no setup and more importantly 2) It integrates with Firebase Auth, meaning you don't have to configure extra callback URLs and such. All Auth providers (Firebase included) only work on a certain set of domains, and in Firebase, your hosted domain, projectname.web.app is whitelisted by default, so let's use Firebase Hosting.

The code is available on Github

We need to install firebase cli, so if you've not done that, do it using this command:

npm install -g firebase-tools

Initialise hosting

Let's initialise firebase hosting by typing:

firebase init hosting

Follow the steps it says. Choose the default options but make sure you make the app SPA compatible and DON'T OVERRIDE public/index.html.

Deploy the app

To deploy the app, type these commands:

npm run build
firebase deploy --only hosting

You have to run these commands whenever you want to deploy any changes to your app.

A security issue

Remember when we initialised Firebase Firestore, we set it to test mode? That's really bad in production, because anyone can make any changes to your database.

Let's fix that. Head over to your firestore rules, and change it out to:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

We're done

And there we go! We're done with the serverless chat app. If you feel like serverless is the way to go, and custom made backends are hard, you're in for a wild ride!

Also, if you want me to do serverless again, but with another service, and possibly different ones instead of just one big BaaS, and also using React this time, do leave a comment!

All the source code is available on Github

Comments

[mageej]

That was a great tutorial, thanks for putting in all the effort.

[arnu515]

Thank you!

[Adrian Patzi]

This is gold 🏆 Thanks for the amazing tutotial Arnu!

[arnu515]

Thank you!