How to add a database to your bolt.new app

bolt is great at building the user interface and the logic of your app but how should you store your app's data today we're going to learn how to integrade bolt with a free database using a service called Firebase first of all if you're not a web developer you might be wondering why do we even have to care about the database apps built with Bol can store things somehow and there's a deploy button that puts my app on the server isn't that enough well not exactly think of it this way you have a tool that you

can use as a website an iPhone and an Android app at the same time to make this possible all these apps need to have the access to the same data that's why a real life database is usually treated a bit separately from these other pieces and often times it's even placed in a different server than our website so let's get back to our project this is the app that I've built in the last video a habit tracker with a dashboard the habits to take off on a given day the ability to add a new one

and finally a calendar showing my progress right now when I refresh the page my data still shows up so it looks like the app is persisting it somehow but it might be a little bit deceptive let me explain let's open Chrome developer tools to see what's going on here in the application tab we can go into local storage and find our data right here to prove it let's remove these entries and refresh the app app and now our data is gone local storage is useful for many things but it's worth knowing its limitation it's well

local it stores the data in your browser which means that if you open the same bolt app on a different laptop you won't have the access to that data even if you open it on your original laptop but on a different browser and even if you're logged into bolt you also won't have the access to the original data so in instead let's connect our app to a proper database for this I've picked Firebase because it's popular and also packs a lot of interesting features we might explore in the following videos but let me know if

there are other Solutions I should cover in the future a cool thing about Firebase is that they have a pretty generous free offering so if you're just ramping up and initially your app won't have a crazy amount of activity per month you should fit within the limit with no costs whatsoever I'll just click Start now and and get to the Firebase dashboard but if this is your first time using Firebase you'll need to log into a Google account as well from here let's create a new project and give it a name to make this simple

we'll skip the analytics for now and click continue after a couple of seconds the project is ready and we can click continue again and let's pick the no cost plan so here's our project overview a Firebase project can include multiple databases and and other stuff so from this page you can add and configure these additional Services create the databases manage security and so on in our case we'll use this page to get the connection details and create a database the connection details will tell alh habits application how to reach Firebase because we're building a web

app we can get this information by choosing the web option here let's pick at the scriptive name that will represent our app and now Firebase Prov Ides us with the instructions how to prepare the code now if you're recording your project by hand you would have to follow these instructions to the letter but bolt only needs the actual config values so let's just copy that part we'll use it in a second but now we should do one more thing and that is to create the actual database let's pick Cloud fire store and click create database

we can leave the default name and location and click next and here's the very important part setting up the access rules for the purpose of this video let's set it to a test mode which will allow anyone to access the data for the next 30 days thanks to this we won't have to deal with the authentication and authorization and we can jum straight into using the database but we'll need to adjust it eventually so this will be a topic for the very next video for now let's click create and in a few seconds we have

a fresh empty database it's time to move back to Bol and use it I'll ask bolt to store the data in fire store and give it my Firebase config that I've copied a minute ago bolt Now updates the dependencies to add the Firebase Library it sets up a file with our Firebase configuration and creates the functions for reading and writing to the database it also updates our habit app components to use these functions let's try it and add a new habit after the app restarts I'll add a workout and we have a problem it shows

some invalid argument error and without digging into that let's see if Bol can solve it okay from what it tells us it looks like our app was generating an ID for the Habit while Firebase expects to create it itself so that was fixed let's try once more and again in argument but this might be a different argument so fix it again please yeah indeed this time Firebase wasn't happy about the value we're sending when the description of the Habit is empty and now bolt modified that logic so third times a charm and success okay we

valed a habit now we can look for that in the Firebase dashboard note that when the first set of data what Firebase calls a collect section is added it might not update automatically on this page so you might have to refresh it and here's our workout entry let's try this one more time add another habit and this time it automatically updates and shows as a second item and they haveit collection we can even modify it here and see that change reflected in Arab there's one last adjustment that I think we should make here before we

wrap it's how we store the connection configuration this information especially the API key shouldn't be exposed to anyone and it's best to make sure it's not even a part of the codebase that's why it's a good practice to keep this value in a special EnV file if in the future we'll want to store this project on GitHub we'll set this file as ignored and in case of Bolt right now this specific file is already automatically being removed for anyone viewing your project other than you as a project owner now let's add some more data oh

and actually let's double check that it's not being stored in the local storage anymore which it's not instead it's nicely persisted in the Firebase time to deploy it after the deployment it's still connecting to the same database so everything works as it should I hope it was useful and you've learned a thing or two stay tuned for the next one where will add authorization user accounts logging in and out and all that necessary stuff and let me know in the comments what are topics you'd like me to cover next