DEV Community

Cover image for Build a serverless chat app with Svelte and Firebase! (PART 4)
arnu515
arnu515

Posted on

6 2

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
Enter fullscreen mode Exit fullscreen mode

Initialise hosting

Let's initialise firebase hosting by typing:

firebase init hosting
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (4)

Collapse
 
mageej profile image
mageej

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

Collapse
 
arnu515 profile image
arnu515

Thank you!

Collapse
 
adrian_patzi_7e0f97ed098a profile image
Adrian Patzi

This is gold 🏆 Thanks for the amazing tutotial Arnu!

Collapse
 
arnu515 profile image
arnu515

Thank you!

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay