Quickstart
How to quickly and easily get started with the Canvas template
These four steps are necessary for the most basic use cases of the template.
Step 1: Set up your homepage
Our Canvas template includes a fully functional homepage maker. App owners can manage and customize their homepage content from the Admin portal without needing to modify the app index page through the Bubble editor.
To set up your homepage:
Go to your app (https://bubble.is/page?id=YOURAPPNAME)
Click on the
Data
tab >App data
tab >Users
data objectClick
run as
next to the user [email protected] (any user that has theRole
field asApp Admin
will be able to access the Admin portal page)On the Admin portal page, click on the Settings tab
Click on the Homepage tab to customize your homepage content
For more information on how to set up your homepage, click here.
If you make changes to the home page in the "version-test" or development environment, those changes won't be immediately reflected in the live environment. You'd need to push the database to live (as in step 4 on this page) in order to update the Live database if you make these changes in the Development database.
Step 2: Register your app with Canvas Portal
You can easily add fully responsive pages and modules to your app by registering your app with our Canvas Portal.
To register your app:
Go to your app (https://bubble.io/page?id=YOURAPPNAME)
Go to the
Settings
tab >Collaboration
tab > add [email protected] as a collaboratorGo to the Canvas Portal and sign up or log in to your account (please use the same email address you are using for your Bubble account)
Go to
MY STUFF
tab to view all of your registered apps with Canvas PortalAfter your app is registered, you can click
VIEW DETAILS
to add a page, update your app colors, or connect with an AirDev partner
Note: you can add [email protected] as a collaborator only on the development version of your app by checking the box "Only dev version" in Settings > Collaboration. We won't ever enter into your app without your permission, but this locks down the live database so that we can't see that information.
Step 3: Set up your email
Set up "pretty emails" functionality and get email metrics built-in to SendGrid.
This Bubble template does not use Bubble’s native “send email” functionality, but instead it uses an API workflow that generates a nicely-formatted HTML email from SendGrid.
As of April 6, 2020, this flow has changed a bit. New SendGrid accounts require you to verify any emails that are used in the "from" fields of emails via their API and to provide your address or your business' address. This is to prevent users from using their platform for spamming or phishing, as a user could previously put any email they'd like into that field (e.g. [email protected], or a recipient's own email address).
To set up your email:
Navigate to SendGrid and sign up for a free account
Once you are in the SendGrid dashboard, click on the
Settings
tab >API keys
tabSelect
Create API key
>General API key
and fill out the subsequent formSave your API key somewhere (you will not be able to view it again)
Go to your app (https://bubble.is/page?id=YOURAPPNAME)
Go to the
Plugins
tab >API connector
>SendGrid API
> Expand send email API callChange the
send email data type
from JSON to textUnder
Headers
enter the following:Key:
Authorization
| Value:Bearer yourapikey
| PrivateKey:
Content-Type
| Value:application/json
| Private
After setting the API key, you need to set the admin email for the app:
In run-mode, go to the Admin portal
From the
SETTINGS
>EMAIL
tab, set your app's contact email. This will be the email addressed used to send all emails from your app, so choose an email address that you can receive responses at, or an email like [email protected]. (NOTE: If this SETTINGS > EMAIL flow is absent, then your app was probably created before we added this feature in mid April. Follow the following guide instead of these steps: https://sendgrid.com/docs/ui/sending-email/sender-verification/)Add your from-name
Update this with the relevant email address and save your changes
Go to the email inbox for the email you just used
Open the most recent email from SendGrid - it should say something like "Please Verify Your Single Sender"
Click the button in that email in a tab that's logged into your SendGrid account, or log in after clicking the button
In your app, you will now be able to send emails from this specific email address.
Step 4: Migrate your Bubble database to live mode
When you first access this template, you will be viewing the Development version of the database. While this database version is sufficient for designing, building, and testing your application, it is highly recommended that you deploy all app updates to live and migrate your development database to the production database before launching your app with real users.
Switching your database view from development to live
When viewing your application's data (through Data
> App data
in the Bubble editor), it is critical that your data view matches the version of your app that you are examining. To switch views between the Development and Production database, simply click the red "Switch to Live" (or "Switch to Dev.") button in the top right.
Copying over your database from development to live (and vice versa)
After you initially deploy your app to live, please copy over the development database to the production version.
While it's not critical to migrate every piece of test data to the live version, there are certain data types (and instances of those data types) that are necessary to retain in both versions for various reasons
Because of this, it is highly recommended that you copy over the entire database and then delete certain bits of test data that are not needed
In any case, there are a few data types you'll want to make sure you've copied over
Each database version should include exactly one instance of the
Website
data typeIf you want to retain the ability to customize your homepage, make sure you've copied over all 11 entries for the
Homepage block
data typeSimilarly, if you want to retain the specific blocks of content you've configured for the homepage, make sure you've copied over all entries for the
Block entry
data type
To copy over database versions, click the red "Copy and restore database" button in the top right.
From this modal, select the option for Copy development data into the live database
Next, choose All types
After you've made sure you've selected the appropriate options, type in the requested text and click to confirm the migration
When you've made changes to the home page in the Development version of the app, you can sync it with the Live version by pushing the Website, Homepage Block, Block Entries, and Palette Colors. Changes can also be ported from Live back to Development.
After the app has real users or other data that is only in the Live database, be EXTREMELY careful when migrating data from Development to Live. If you accidentally push all of your data, you can lose ALL client data, and it may not be recoverable.
Last updated