Rody, a Developer Relations Engineer for Firebase Studio shares how easy it is to get started with a blank template in Firebase Studio. In this video, he shows how to clone your code inside a workstation and use nix to install dependencies. Watch a step by step tutorial on cloning code, setting dev.nix, web preview, and leverage Gemini in Firebase Studio.
Chapters: 0:00 - Get started 1:16 - Cloning SQLite and Emscripten 1:42 - Set up the VM 3:47 - Configure web preview 5:15 - Leverage Gemini 5:47 - Recap
Firebase Studio → https://goo.gle/firebasestudio
#Firebase #SQLite #WASM #NixOS
Speaker: Rody Davis Products Mentioned:, Firebase,
0:00 · [MUSIC PLAYING] RODY DAVIS: Hi, my name is Rody, DevRel for Firebase Studio.
0:07 · And today, I want to show you how easy it is to get started with our blank template, where you can clone your code and get started with Nix.
0:14 · The first step is to go to studio.firebase.google.com, and then click on New Workspace.
0:20 · On the top right, you’ll see Add New Empty Workspace.
0:23 · And when we click that, we’re brought to our new workspace creation page.
0:26 · Here you can add any name for your workspace and not having to worry about name collisions.
0:31 · In this case, we’ll just do App, and then hit Create.
0:37 · After our workspace is created, you will see the readme, dev.nix, and Gemini Chat all come up at the same time.
0:44 · Inside of dev.nix, this is where we can define all of our dependencies for our code.
0:49 · This is something that is configured at the OS level using NixOS.
0:54 · We take advantage of Nix packages, which you can find on NixOS packages.
0:59 · We can have custom hooks to set up the web previews, as well as the onCreate and onStart hooks, which get run when the workspace is first created and every time that you reload the page.
1:09 · Today, we’re going to be compiling SQLite from source, compiling it to WASM, and setting it up with the web preview.
1:15 · So the first step is to go ahead and clone SQLite.
1:19 · We can open up the terminal and then clone SQLite from the Git mirror.
1:25 · The next step is we need to clone Emscripten so we can compile SQLite to WASM.
1:31 · So we can do that by running the following command.
1:34 · Once that’s done, we will have both SQLite and Emscripten cloned inside of our workspace.
1:41 · Next, we need to set up our VM so that it has all the required dependencies so that we can compile SQLite and use both Python and C toolchains.
1:50 · So here we can go to dev.nix and then uncomment the Python packages because that’s actually what we need.
1:58 · Here, above packages, you’ll see this Add Packages button.
2:01 · This will open up the NixOS package registry, which we can use to search for packages.
2:07 · In this case, we need GCC.
2:09 · And in just a second, we’ll see that it pulls all of the packages related to that name.
2:14 · We can go ahead and add that to our packages array.
2:17 · We also need to add gnumake, which we can also do by searching for gnumake and then clicking on the first one in the list.
2:24 · After that’s done, we will see that this button on the bottom right says Rebuild Environment.
2:29 · This is what Firebase Studio has to do every time that we update dev.nix.
2:34 · Since it’s an immutable way to specify our dependencies, it’ll create a new snapshot that will rebuild the new environment.
2:41 · And if there’s any errors, we can roll back to the previous version.
2:46 · This usually just takes a couple seconds, so we can wait for that to complete.
2:49 · After that’s done, we now have Python, GCC, and gnumake all set up and registered in our VM.
2:57 · This means that it’s available both in the terminal and in the web previews.
3:01 · Let’s first go ahead and build Emscripten from source, which we can do so by navigating to the directory and then running the following command.
3:10 · After Emscripten finishes installing, we now can activate it, which we can do so by modifying the command.
3:18 · Next, we can copy this line, which we will paste into the terminal, which will make it available for the current terminal session.
3:24 · Next, we need to compile SQLite.
3:27 · So we can do that by navigating up and into the SQLite directory.
3:31 · The first step is to configure and enable all the files.
3:38 · Next, we need to create the SQLite C file, which we can do by running make sqllite3.c.
3:46 · After that’s done, it’s time to configure the web preview to use the JSFiddle that is included inside the SQLite source code.
3:54 · To do so, head over to the dev.nix, and navigate down to the Preview section.
3:59 · We can go ahead and uncomment this preview block, but we need to change it for our settings.
4:07 · First, we need to add a change working directory so that the preview is actually started in the correct subfolder.
4:13 · Everything in Nix requires a semicolon to be at the end, so make sure not to forget that.
4:18 · And since we already have Python installed on our VM, we can actually take advantage of the Python static HTTP server.
4:24 · In Firebase Studio, all previews run on a specific port, so make sure to pass that in with an uppercase PORT to your server command.
4:33 · And after we do that, we just have to rebuild our environment one more time.
4:38 · After our IDE rebuilds, we can then go to the Web tab, after which we’ll see this JSFiddle up and running.
4:45 · What’s really cool about this is it’s using the SQLite WASM build that we just compiled, which also depended on Emscripten, all with their own local environment.
4:55 · To verify that this is working, we can just write a simple SQL query.
5:08 · After we do it, we can hit Run, and we can see Hello Firebase.
5:12 · All right, this is awesome.
5:14 · Now let’s use Gemini to update files in our project.
5:17 · When you click over on the Gemini tab, you’ll see that there is a model picker where you can choose anything from Gemini 2.5 Pro to Flash and other models, even specifying a custom model ID.
5:27 · We can also include attachments here with the bottom left icon.
5:31 · But in this case, we want to update our readme with the current state of our project, so we can just ask Gemini to do this.
5:38 · We can go ahead and give it a simple prompt.
5:40 · And after it’s done, it’s going to suggest an edit, which we then can review or just accept.
5:46 · So it looks like everything’s coming together.
5:48 · We cloned both Emscripten and SQLite from source and compiled them.
5:52 · We then set up our dev.nix to have all of the dependencies for our NixOS environment set up, which we can then go and review in dev.nix.
6:01 · We also set up the web preview to be able to run the actual SQLite WASM file inside of the web preview using that special port.
6:10 · And then we leveraged Gemini to be able to read our files and run terminal commands.
6:15 · I hope this gives you a brief overview of the capabilities of Firebase Studio and how easy it is to get started with a blank template.
6:22 · If you have any questions, make sure to reach out and let us know down in the comments if you have anything that you’d like to see next.
6:28 · Thanks for watching.