Set up a Vite project with React and TypeScript

Set up Vite local dev with the Netlify CLI

Add TypeScript powered serverless functions to a Netlify project

Create a form with React hooks

Create a serverless form submission handler with TypeScript

Submit form data to a Netlify serverless function

Deploy a Vite project with the Netlify CLI

Deploy a Serverless API React Application with TypeScript

After all your hard work, it's time to deploy your app! 

In this lesson, you will learn how to get your project onto GitHub and deploy it using Netlify

https://app.egghead.io/api/v1/lessons/netlify-deploy-a-vite-project-with-the-netlify-cli/subtitles

Instructor: [0:00] Now that we've got this app running, let's get it up live on the Internet. The first thing I'm going to do here is I'm going to run git init to set it up as an empty git repository, so that we can use it. I'm using what's called the GitHub CLI to create this repo. This is one of my favorite tools. We're not going to go deep into how it works.

[0:18] I've just installed the GitHub CLI. I can run gh repo create, and because I'm in my default account and I've named this folder what I want the repo to be, I can actually just hit enter. It will auto-fill with Egghead Serverless TypeScript, which is exactly what I wanted.

[0:37] I'm going to skip through the description, and I want this to be public. Here we go. It gives me a confirmation. I hit Yes. I have created that repo. I want to make sure that we've got everything we want here. This is a generated file here, this .netlify. I want to make sure we don't include that in the committed files. I'm going to echo .netlify into the .gitignore.

[1:03] This double greater-than symbol means that it's going to append to the end of .gitignore. This is a handy way to quickly add one line to a file. When I hit enter, that's now in there. If I run my git status again, we can see that .netlify is no longer included.

[1:18] That means I can gitadd everything, gitcommit, and we'll give this a feature of working typescript form plus serverless function. Then I can gitpush and I want to set the upstream with -u. We'll do origin main. This gets pushed up live.

[1:40] If I click on this, I can see we've created that repo. It's up live, everything that we wanted to be in there is in there. There is our submit.ts. This thing's ready to deploy. The first thing first, I have the Netlify CLI installed, so I'm going to run Netlify login.

[2:00] I'm already logged in. If I wasn't, it would pop open the browser and ask me to confirm that I wanted to login with the CLI. I would confirm that, it would send me right back here. Now that I've done that, I can run Netlify init.

[2:12] This is going to walk me through setting up a new project. I want to create and configure a new site. I want to put this in my own team, and I'm going to call this, Egghead serverless typescript. We can see here, it's going to be at this address inside the Netlify app.

[2:34] It's going to create a public URL of Eggheadserverlesstypescript.netlify.app. These need to be unique, so you won't be able to use the same name as me. You can also leave it blank and it will auto-generate one for you. Either way, it doesn't matter. You can set up a custom domain later on in the app. For this particular project, we're not going to do that. Some defaults get set up here. It auto-detected Vite again.

[2:55] It shows us Vite build. That's what I want. Dist is the default folder for Vite to build to, so we can hit enter again. It also knows that Netlify functions is the default folder, so we can hit enter. Once we've done that, it's going to go through and set everything up.

[3:09] It is now created. We've got Netlify set and running. If I run Netlify open, it's going to open in the browser, the Netlify dashboard so that I can see this site running. We can click in here. Here's the deploy in progress. Here we go. 2.7 seconds to build.

[3:27] That's because Vite is wicked fast. The functions bundled very, very quickly as well, and the site is already live. I can head over now and view it. Here is our running site. This is actually live on the Internet. You can go and visit it right now. If I put in my name and we'll put in a color of chartreuse, our function is also running.

[3:51] Its admitted to that function. My name is Jason. My favorite color is chartreuse. We've got this thing running. You have now successfully created, tested, and deployed a typescript powered React project, as well as typescript powered serverless functions all to Netlify. Congratulations.

Deploy a Vite project with the Netlify CLI

Share this video with your friends

Course

Deploy a Serverless API React Application with TypeScript