netlify

Bolt

Welcome! This is the sixth and final lesson on how to build fullstack apps with Bolt and Supabase

If you’re just joining, you’re in luck, ‘cause we already have tons of content for you to enjoy while turning your app from just an idea to deployed web application in just an afternoon.

Before you dive into this lesson, here’s where you can find 

 if you want to get up to speed (which you probably do, otherwise, 

So, as I was saying, In this lesson, we'll take our fully functional calorie calculator app—complete with authentication and data storage—and deploy it to the internet for everyone to see and use.

Netlify is a platform that lets you deploy websites instantly from your Git repository (or in this case, our Bolt project), handling 

There are many alternatives , but we are specifically using Netlify because of its ease of use and seamless connection with Bolt (as you can see, we literally need just 3 clicks to get our app from 

But first, to deploy our app, we need a free Netlify account. So, let’s head over to 

There, you'll be prompted to sign up using your preferred method (one of the rare times where the prompter becomes the prompted).

Since we used email for our Supabase account in Part 2, we'll do the same here.

 will take you to an account setup screen. Fill in your details:

 will prompt you to create your first project, but we’ll just click 

And now you should be able to see a dashboard that looks like this:

Great! Now let’s go back to our Bolt project and deploy our app.

This is what our project looks like right now:

Let’s go ahead and deploy it! To start the process, click on the blue 

 automatically starts deploying the app for us:

This should take a couple of minutes but once it’s done, you’ll see a message similar to this:

Our fun little project is now fully functional and accessible online! In what, like 30 minutes?

 provides to see it in action. You can even test it in incognito mode or share it with a friend–you’ll see it still works.

Step 3: Transferring Your App to Your Netlify Account

Of course, our whole project is still on 

 account. To truly own it, we need to transfer it to our own, instead.

So, let’s start the process by clicking on the second, longer URL that 

And just like that, your web app is now transferred to your account.

You can then set up a custom domain if you want or link it to a domain you already own, but we’ll look into that at another time.

Now that we have the deployed web app in our possession, it’s time to get the code, too.

Getting Ownership Of The Code (And Running Locally)

To do that, we’ll start by going back to our Bolt project and clicking:

 folder in it. Go ahead and extract it to your preferred location.

Before running our project, we’ll need:

You can use Homebrew to install Node.js, which includes 

 in our project. If you haven’t moved to your project’s directory yet, now it’s time to do it.

 and wait until the installation is complete.

The result in your command line should look similar to this:

, we can see that our project is running locally.

Now that you have your project locally, you need a way to deploy changes to your Netlify site without relying on 

To do that, we first need to make sure that we have 

 account the same way you did when you logged in through 

Once you’re logged in, you can to link your local project with your Netlify site by running 

If you have multiple sites, Netlify will present you a list where you can choose which site you want to link

And, finally, you can deploy your changes by running 

 if you’re brave enough to deploy your project straight to production

With that, you have now completed our course on how to build fullstack apps with Bolt + Supabase. You have a complete–and useful–web app created from scratch, with user authentication and data storage, and deployed to the web!

You are also ready to go ahead and create your own projects. For work, for your resume, for your new SaaS, or just for fun.

We’re sure you’ll be able to create great things with this!

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">How To Deploy Your Web App With Netlify</h1>Welcome! This is the sixth and final lesson on how to build fullstack apps with Bolt and SupabaseIf you’re just joining, you’re in luck, ‘cause we already have tons of content for you to enjoy while turning your app from just an idea to deployed web application in just an afternoon.Before you dive into this lesson, here’s where you can find <a href="https://www.newline.co/@zaoyang/how-to-build-complete-fullstack-apps-in-less-than-an-afternoon-with-bolt-supabase--ab33ac05" target="_blank">Part 1</a>, <a href="https://www.newline.co/@zaoyang/what-is-supabase-and-how-it-can-replace-your-entire-backend--62b84205" target="_blank">Part 2</a>, <a href="https://www.newline.co/@zaoyang/how-to-build-a-fullstack-app-mvp-in-an-hour-with-bolt--fd2fa0b0" target="_blank">Part 3</a>, <a href="https://www.newline.co/@zaoyang/how-to-set-up-auth-and-store-user-data-with-bolt-supabase--363a28b8" target="_blank">Part 4</a>, and <a href="https://www.newline.co/@zaoyang/how-to-build-beautiful-responsive-uis-in-minutes-with-bolt--c04e2858" target="_blank">Part 5</a> if you want to get up to speed (which you probably do, otherwise, what exactly are you going to deploy? 🤔)So, as I was saying, In this lesson, we'll take our fully functional calorie calculator app—complete with authentication and data storage—and deploy it to the internet for everyone to see and use.Tools We’ll Use:<ul><li>Bolt</li><li>Netlify</li></ul>Let’s get started!<h2 class="heading-anchor-text" id="step-1:-create-a-free-netlify-account">Step 1: Create a Free Netlify Account<a class="d-inline heading-anchor" title="Direct link to heading" href="#step-1:-create-a-free-netlify-account">#</a></h2>Netlify is a platform that lets you deploy websites instantly from your Git repository (or in this case, our Bolt project), handling hosting, serverless functions, and web performance with just a few clicks.There are many alternatives , but we are specifically using Netlify because of its ease of use and seamless connection with Bolt (as you can see, we literally need just 3 clicks to get our app from project to live)But first, to deploy our app, we need a free Netlify account. So, let’s head over to <a href="https://www.netlify.com/" target="_blank" rel="noopener noreferrer nofollow">Netlify</a> and click Get Started.<figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20250327115153034_image.png" attachmentid="a737fc4b-b5fb-4b01-ab12-dcb3c7ddc777" contenteditable="false" data-width="1600" data-height="724"><div></div></figure>There, you'll be prompted to sign up using your preferred method (one of the rare times where the prompter becomes the prompted).Since we used email for our Supabase account in Part 2, we'll do the same here.<figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20250327115706119_image%20%281%29.png" attachmentid="7b981f1b-0501-4a34-bfb3-88b73993f502" contenteditable="false" data-width="1600" data-height="728"><div></div></figure>Once signed up, Netlify will take you to an account setup screen. Fill in your details:<ul><li>First &amp; Last Name – May be pre-filled depending on your signup method.</li><li>Usage Type – I chose Personal, and for this tutorial you should do the same, but once you create another app, feel free to choose what fits best.</li><li>Site Type – Choose Web App.</li><li>Role – I selected Other.</li><li>Team Name – Of course, I went with Best Calorie Calculator Ever, but you can name yours whatever you like.</li></ul><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20250327115717439_image%20%282%29.png" attachmentid="2f8185af-a23c-42f2-898e-4796bcdc67d3" contenteditable="false" data-width="1600" data-height="724"><div></div></figure><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20250327115730004_image%20%283%29.png" attachmentid="25b8b48f-0e2f-4ab6-a2c0-de277f9a10d9" contenteditable="false" data-width="1600" data-height="727"><div></div></figure>Next, Netlify will prompt you to create your first project, but we’ll just click Skip this step for now.<figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20250327115856352_image%20%284%29.png" attachmentid="1ceb76e2-06d9-451f-9709-372e562b06d2" contenteditable="false" data-width="1600" data-height="722"><div></div></figure>And now you should be able to see a dashboard that looks like this:<figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20250327115910894_image%20%285%29.png" attachmentid="56eec125-8578-4bee-a8fa-a12c5c690c51" contenteditable="false" data-width="1600" data-height="725"><div></div></figure>Great! Now let’s go back to our Bolt project and deploy our app.<h2 class="heading-anchor-text" id="step-2:-deploying-the-app-with-bolt">Step 2: Deploying the App with Bolt<a class="d-inline heading-anchor" title="Direct link to heading" href="#step-2:-deploying-the-app-with-bolt">#</a></h2>This is what our project looks like right now:<figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20250327115921976_image%20%286%29.png" attachmentid="448fb781-be54-448e-b56f-d054a55e9339" contenteditable="false" data-width="1837" data-height="777"><div></div></figure>Let’s go ahead and deploy it! To start the process, click on the blue Deploy button at the top right.As you can see, Bolt automatically starts deploying the app for us:<figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20250327115932573_image%20%287%29.png" attachmentid="fe027f63-1982-4c80-b37a-dcd844b04663" contenteditable="false" data-width="1811" data-height="843"><div></div></figure>This should take a couple of minutes but once it’s done, you’ll see a message similar to this:<figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20250327115943694_image%20%288%29.png" attachmentid="ee6a2641-1250-4aca-8361-c79098a9a0e6" contenteditable="false" data-width="589" data-height="432"><div></div></figure>Our fun little project is now fully functional and accessible online! In what, like 30 minutes?Visit the URL Bolt provides to see it in action. You can even test it in incognito mode or share it with a friend–you’ll see it still works.<figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20250327115956523_image%20%289%29.png" attachmentid="c067149c-b9a5-492c-8c02-4cf142a3d1b0" contenteditable="false" data-width="1892" data-height="859"><div></div></figure><h2 class="heading-anchor-text" id="step-3:-transferring-your-app-to-your-netlify-account">Step 3: Transferring Your App to Your Netlify Account<a class="d-inline heading-anchor" title="Direct link to heading" href="#step-3:-transferring-your-app-to-your-netlify-account">#</a></h2>Of course, our whole project is still on Bolt and its Netlify account. To truly own it, we need to transfer it to our own, instead.So, let’s start the process by clicking on the second, longer URL that Bolt gave us:<figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20250327120007868_image%20%2810%29.png" attachmentid="c037eeba-1f89-40c5-af91-d2c1394c92ca" contenteditable="false" data-width="626" data-height="711"><div></div></figure>From the redirected page, click on the Claim apps button:<figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20250327120018966_image%20%2811%29.png" attachmentid="6ecdf2f7-6524-4e69-9175-6a4fcb9b0105" contenteditable="false" data-width="1600" data-height="731"><div></div></figure>And just like that, your web app is now transferred to your account.<figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20250327120035046_image%20%2812%29.png" attachmentid="fb6b975d-5028-4cf4-bf4f-6a0cffbb0540" contenteditable="false" data-width="696" data-height="754"><div></div></figure>You can then set up a custom domain if you want or link it to a domain you already own, but we’ll look into that at another time.Now that we have the deployed web app in our possession, it’s time to get the code, too.<h2 class="heading-anchor-text" id="getting-ownership-of-the-code-(and-running-locally)">Getting Ownership Of The Code (And Running Locally)<a class="d-inline heading-anchor" title="Direct link to heading" href="#getting-ownership-of-the-code-(and-running-locally)">#</a></h2><h3 class="heading-anchor-text" id="1.-download-the-project">1. Download the Project<a class="d-inline heading-anchor" title="Direct link to heading" href="#1.-download-the-project">#</a></h3>To do that, we’ll start by going back to our Bolt project and clicking:<ul><li>Export → Download</li></ul><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20250327120056018_image%20%2813%29.png" attachmentid="ed23dd10-dd1b-4d23-a9aa-7a29407207d0" contenteditable="false" data-width="932" data-height="156"><div></div></figure>You should get a .zip file with a project folder in it. Go ahead and extract it to your preferred location.I renamed mine to <code>best-calorie-calculator-ever</code>, but feel free to choose your own name.Now, let’s run it locally.<h3 class="heading-anchor-text" id="2.-install-dependencies">2. Install Dependencies<a class="d-inline heading-anchor" title="Direct link to heading" href="#2.-install-dependencies">#</a></h3>Before running our project, we’ll need:<ul><li>Node.js (for npm and npx)</li><li>Vite (for local development)</li></ul>Let’s start with Node.js<h3 class="heading-anchor-text" id="on-linux">On Linux<a class="d-inline heading-anchor" title="Direct link to heading" href="#on-linux">#</a></h3><ol><li>Install Node.js and npm<ul><li>For Debian/Ubuntu systems:<code>curl -sL &lt;https://deb.nodesource.com/setup_lts.x&gt; | sudo -E bash -</code><code>sudo apt install nodejs -y</code></li><li>For Red Hat/Fedora systems:<code>curl -sL &lt;https://rpm.nodesource.com/setup_lts.x&gt; | sudo -E bash -</code><code>sudo dnf install nodejs -y</code></li><li>For Arch/Manjaro systems:<code>sudo pacman -S nodejs npm</code></li></ul></li><li>Verify Installation<code>node -v</code><code>npm -v</code><code>npx --version</code></li></ol><h3 class="heading-anchor-text" id="on-macos">On macOS<a class="d-inline heading-anchor" title="Direct link to heading" href="#on-macos">#</a></h3>You can use Homebrew to install Node.js, which includes <code>npm</code> and <code>npx</code>:<ol><li>Install Homebrew if you haven't already.</li><li>Install Node.js:</li></ol>brew install node<ol><li>Verify Installation<code>node -v</code><code>npm -v</code><code>npx --version</code></li></ol><h3 class="heading-anchor-text" id="on-windows">On Windows<a class="d-inline heading-anchor" title="Direct link to heading" href="#on-windows">#</a></h3><ol><li>Download the Node.js Installer:<ul><li>Go to the <a href="https://nodejs.org/en/download/" target="_blank" rel="noopener noreferrer nofollow">Node.js download page</a> and download the latest LTS version.</li><li>Run the installer and follow the prompts to install Node.js and npm.</li></ul></li><li>Verify Installation:<ul><li>Open a new Command Prompt or PowerShell.</li><li>Run the following commands to verify that Node.js, <code>npm</code>, and <code>npx</code> are installed:<code>node -v</code><code>npm -v</code><code>npx --version</code></li></ul></li></ol>And now let’s install Vite in our project. If you haven’t moved to your project’s directory yet, now it’s time to do it.After you’ve done it, run <code>npm install vite</code> and wait until the installation is complete.<h3 class="heading-anchor-text" id="3.-run-locally">3. Run Locally<a class="d-inline heading-anchor" title="Direct link to heading" href="#3.-run-locally">#</a></h3>First, we have to run <code>npx vite build</code> to build our project.<figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20250327120111010_image%20%2814%29.png" attachmentid="4bcfefdb-3df2-42be-90e8-8aab8201c12d" contenteditable="false" data-width="732" data-height="231"><div></div></figure>And once it’s done, we can run <code>npm run dev</code> to run it.The result in your command line should look similar to this:<figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20250327120120091_image%20%2815%29.png" attachmentid="21090a7c-69a8-4c2c-869d-527a9bc6827c" contenteditable="false" data-width="465" data-height="200"><div></div></figure>And, indeed, if we go to <a href="http://localhost:5173/" target="_blank">http://localhost:5173/</a>, we can see that our project is running locally.<figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20250327120130575_image%20%2816%29.png" attachmentid="8b05d211-e184-4e05-a3ff-82f07fa50f5a" contenteditable="false" data-width="1892" data-height="859"><div></div></figure><h2 class="heading-anchor-text" id="deploying-local-changes-to-netlify">Deploying Local Changes To Netlify<a class="d-inline heading-anchor" title="Direct link to heading" href="#deploying-local-changes-to-netlify">#</a></h2>Now that you have your project locally, you need a way to deploy changes to your Netlify site without relying on Bolt anymore.To do that, we first need to make sure that we have Netlify CLI installed. You can do that by running <code>npm install netlify-cli -g</code> in your command line.Next up, you have to log into your Netlify account from your terminal by running <code>netlify login</code> which will prompt you to log into your Netlify account the same way you did when you logged in through Bolt.Once you’re logged in, you can to link your local project with your Netlify site by running <code>netlify link</code>If you have multiple sites, Netlify will present you a list where you can choose which site you want to linkAnd, finally, you can deploy your changes by running <code>netlify deploy</code> if you want to first create a preview link which you can then merge into the production app or <code>netlify deploy --prod</code> if you’re brave enough to deploy your project straight to production<h2 class="heading-anchor-text" id="wrapping-up">Wrapping Up<a class="d-inline heading-anchor" title="Direct link to heading" href="#wrapping-up">#</a></h2>And that’s it!With that, you have now completed our course on how to build fullstack apps with Bolt + Supabase. You have a complete–and useful–web app created from scratch, with user authentication and data storage, and deployed to the web!You are also ready to go ahead and create your own projects. For work, for your resume, for your new SaaS, or just for fun.We’re sure you’ll be able to create great things with this!

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

How To Deploy Your Web App With Netlify

Tags

Tools

Level

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript