Skip to content

Serverless chat webapp I made using svelte and firebase for my blog

Notifications You must be signed in to change notification settings

arnu515/serverless-chat

Repository files navigation

Serverless Chat app with svelte and firebase

This is a serverless chat app I designed for by blog/tutorial on how to go serverless (and if it is a good option)

Check the blog out here!

Quickstart

  1. Clone the repo
git clone https://github.com/arnu515/serverless-chat.git
  1. Create a project on Firebase

Create a project on firebase. Name it anything you want.

  1. Create a web app on firebase.

Check the docs to learn how

  1. Copy your app's javascript config object to your clipboard.

A sample config looks like this:

{
    apiKey: "your api key",
    authDomain: "projectname.firebaseapp.com",
    databaseURL: "https://projectname.firebaseio.com",
    projectId: "project name",
    storageBucket: "projectname.appspot.com",
    messagingSenderId: "xxxxxxx",
    appId: "xxxxxxxxxx",
};
  1. Initialise Auth and Cloud firestore on firebase

Check the docs to learn how

  1. Create a file in src/ called firebase-config.ts and put this in it:
export default {
    // your config
};

For example, if I use the example config provided up above,

export default {
    apiKey: "your api key",
    authDomain: "projectname.firebaseapp.com",
    databaseURL: "https://projectname.firebaseio.com",
    projectId: "project name",
    storageBucket: "projectname.appspot.com",
    messagingSenderId: "xxxxxxx",
    appId: "xxxxxxxxxx",
};
  1. Finally, we can run the app.

Type

npm run dev

in your terminal. This will start your app on http://localhost:5000.

  1. Play around, tweak some stuff

Customise the app to your liking

  1. Deploy

You can deploy your app anywhere, on any host, but to keep it simple, and to not require to change any Firebase Auth rules, let's host the app on Firebase. Open a terminal and type:

firebase init hosting

and follow the interactive guide until you have configured Firebase Hosting. Choose public as your hosting directory. Make sure you don't override public/index.html

Then, type

npm run build
firebase deploy --only hosting

Your app should be live on projectname.web.app! You can view my version here

About

Serverless chat webapp I made using svelte and firebase for my blog

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published