serverless-chat Svelte Themes

Serverless Chat

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

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

Top categories

Loading Svelte Themes