svelte-firebase-template Svelte Themes

Svelte Firebase Template

Template for building web applications with Svelte & Firebase

Svelte Firebase Template

This is a project template for Svelte apps integrated with Firebase. It was forked from the original template project for Svelte and all the necessary configuration for Firebase has already been done.

Installation

Please create a project on Firebase beforehand by going to the Firebase Console, clicking create a new Project. Next create an app inside the Firebase project by clicking +Add app and following the wizard. The app and the project can have different names, this will not interfere with the proccess

Lastly, configure Firestore and Hosting inside your newly created app.

This is essential because preconfigured apps cannot be deployed before you choose the location of specific resources for your project, in creating a Firestore DB instance, it'll prompt you to choose a location, therefore completing the setup. Learn More about this

To create a new project based on this template using degit:

npm i -g firebase-tools
firebase login
npx degit JoFont/svelte-firebase-template svelte-app
cd svelte-app

Note that you will need to have Node.js installed.

Get started

Install the dependencies...

cd svelte-app
npm install

Configure Firebase project by editing .firebaserc like so:

{
  "projects": {
    "default": "<THE-EXACT-NAME-OF-YOUR-FIREBASE-PROJECT>"
  }
}

Note that this is the name of the project and not the app inside of the project.

...then start Rollup & Firebase Server:

npm run dev

Avoid using other development servers when using Firebase as it can only run on localhost with the built in server unless, other forms of integration are used wich, are not contemplated in this template.

Navigate to localhost:3000. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

Building and running in production mode

To create an optimised version of the app:

npm run build

Deploy with:

npm run deploy

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes