Firebase Integration
Learn how to connect Firebase to your Webdraw App
The Firebase integration is in an early stage, and we’re working on improving it. Any feedback is welcome!
What is Firebase?
Firebase is a Google-backed cloud platform that provides a suite of tools for building web and mobile applications.
Examples of what you can do are, but not limited to:
- Add Login with Google to your app
- Add real-time functionality to your app, e.g. a chat where users can talk to each other
- Save your app data to the cloud
You can learn more about Firebase here.
Setting up Firebase
To connect Firebase to your Webdraw App, you need to create a Firebase project.
Creating your project
- Go to the Firebase Console and login with your Google account.
You should now see a page like this:
Firebase Console
- Click on the button to create a new project, and give your project a name.
Firebase analytics is not required, so you can leave it disabled. (If you want to use it, you can enable it later)
A new project will be created, and you will be redirected to the project dashboard.
Firebase Project Dashboard
Getting your Firebase config
- Open your Firebase project settings and scroll down to the
Your apps
section.
Firebase Project Settings
- Click on the
Web
icon to add a new web app to your project. This will be our Webdraw App. Give it a nickname, and click on theRegister
button.
The Firebase hosting
option is not needed, since Webdraw already hosts your app
automatically.
Add Web App
- On the
Add Firebase SDK
section, copy the code from thefirebaseConfig
. You will paste this code into Webdraw to connect it to your Firebase project.
Firebase Config
Connecting Webdraw to your Firebase project
- Inside your Webdraw project, open the prompt library and search for the
Firebase
prompt.
Search Firebase Prompt
- Click on the
Firebase
prompt to add it to your canvas, select it and then click on theEdit
button.
Edit Firebase Prompt
- At the bottom of the prompt, replace
<EDIT HERE AND PASTE YOUR FIREBASE CONFIG>
with the code you copied from Firebase.
After you have pasted the code, click on the Update
button to save the prompt.
Congratulations! You now can use this Firebase prompt to create any Firebase-related functionality in your app.
You can follow these examples to get started: