Deploy a Supabase Application to Production with Cloudflare Pages

Kristian Freeman: [0:00] The code for our Supabase chat application is finished, and now it's time to deploy it. To do that, we'll use Cloudflare Pages which is a deployment platform for deploying JAMstack Apps such as our Next.js application.

[0:11] In order to deploy our application, we need to do two things. First, we need to push it to GitHub, and then we need to add it in Cloudflare Pages and schedule a build that will be our first chat app deployment.

[0:22] In the command line in VS code, I'll just run git status, and you can see that it has all of these changes that haven't been tracked yet. That's because when I created my next application, it automatically made an initial git commit.

[0:35] I'll just say git add. to add everything here. Then, I'll make a new commit using git commit-m saying, "Finish the Code." Now, I need to make a new repository.

[0:47] If you have the GitHub CLI installed, you can write gh repo create, and give it a new name. I'll call mine Supabase Egghead Example. You can give it a description. I'll just say example code for Supabase Egghead course. I'll make it public. I'll just say, "Yes to adding the origin git remote," and I'll just try to git push, which will push this up to GitHub.

[1:11] If I come to github.com and refresh, I can see my project here. I pushed my first commit up to GitHub. In the cloud for dashboard, we can go to this pages section here. By the way, if you haven't made a Cloudflare count, it's totally free to sign up. Go ahead and do that.

[1:24] Then in pages here, I'll just select create a new project. Here are all of my GitHub repositories. I just want to pick the Supabase Egghead example. If you don't see this, when you go through the pages dashboard, it's because you haven't signed in with GitHub yet. That'll be a quick 5, 10 second thing.

[1:40] You can also say which repositories you want. I'm telling Cloud web pages to be able to access all of my repositories. You can just select the ones you want or really do whatever you want there. I'll select Supabase Egghead example, and then I'll say begin setup.

[1:57] By default, I'm just going to say, "Yes, this is a good project name. My production branch is going to be main," which you can customize. Then down here and build settings, I just have some framework presets. I can choose from create-gatsby, next, next, etc.

[2:12] This is going to be Next.js because that is the framework I'm using. It'll set the build command which is next build and next export, and that'll set the output directory to out.

[2:24] The root directory, I won't need to change because my project is running at the root directory of my git repo, but I do need to pass environment variables. These are the Supabase API key and URL that I made in my .n.local at the beginning of making my project. I'll just open up my .n.local. I'll say next public Supabase URL and I'll paste that in.

[2:49] Then I'll do the same with my API key. I pasted in my URL and my API key. Now it's time to save and deploy. This will take just a couple minutes as it gets ready to deploy a new project.

[3:02] Then when it's done, we'll have a URL that we can visit to see our application deployed to production. When our build completes, we'll have our final URL for our project which is Supabaseeggheadexample.pages.dev.

[3:15] This won't work quite yet and that's because we need to update some URLs in our project with our new production URL. Let's copy this and go back to the Supabase dashboard.

[3:25] Here in the dashboard, we'll go to settings and then we'll go to auth settings and give it our base URL. This will just be HTTPS Supabaseeggheadexample.pages.dev, and I'll just save that.

[3:39] Then if I come back to the Supabase chat auth page here and press log in with GitHub, I'll get redirected back to my chat route. You can see everything worked correctly and this is running in production. To test this, let's open this up in a new tab.

[3:53] You can see that if I write a new message here, it will also show up on both windows.

[3:58] With Cloudflare Pages, every time that I push a change to my GitHub repository, say if I update the user interface or something else, add new features, all I have to do is push to GitHub and I'll get a new deploy that will automatically be deployed in just a couple minutes to this Supabaseeggheadexample.pages.dev.

[4:16] I can also get preview deploys. If I come down to continue to project, you can see every time I push something, including pull requests, I'll get a unique URL that I can use for checking out my Supabase application.

[4:30] I'll also get custom domain support if I want to point it to maybe, for instance, Supabasechat.com. The only thing that you need to keep in mind is that these subdomains are technically different than Supabaseeggheadexample.pages.dev.

[4:44] You might have to do some manual work to, for instance, re-authenticate on one of these subdomains using an access token. That part can be a little tricky and it's out of scope for this tutorial, but just a heads up that that might be an issue that you run into.