Deploy an Express API to Vercel

Hello friends welcome to coding garden and welcome to this video where I will show you how to deploy an Express API to versel or versal I'm going to say either one of those I actually don't know the correct pronunciation I could have looked it up before recording this video but I'm not going to so versel is a place where you can deploy serverless functions also like next.js apps and stuff like that uh but you actually can also deploy Express apis so you might be wondering why on Earth would you want to deploy an Express API to versl or why would you even want to build an Express API this video is not going to talk about that basically I'm making this video for people that have an Express API and they want to deploy it to Verso and there are some caveats for deploying an Express API to yourself it cannot be long-lived that means you can't have any sort of like persistent or long-lived connections like websockets or server sent events if you look at the virtual documentation uh you'll see they talk about that like it's not not built for that and you should also just look at this entire page that talks about the limits of your serverless functions and make sure that your potentially won't won't hit any of those limits also there's some documentation on using Express with Verso it's really funny because they kind of tell you like hey just don't do that but again I'm telling you if you want to do that this is how we're going to do it but they also have a section talking about drawbacks and edge cases so definitely give this page a read to make sure that you're going to be able to deploy the app that you built to yourself but if you've made it past all of that and you still wanted to play an Express API to yourself let me show you how first let's make an Express API so I'm going to use my Express API starter typescript which is a little scaffold for a project I also have an Express API starter without typescript you can pick and choose but in your terminal if you run this command and then you can give it a name it'll create a directory give you a basic Express app in that directory and you can go from there so now if I go into that directory and if I do npm run Dev I will have myself a little Express API running on Port 5000 it also comes built in with a nice little endpoint API V1 emojis and you get a list list of emojis it also has the home page so this is what we're going to attempt to deploy to Verso so the first thing you'll need to do is create a folder in here called API and then inside of that create an index.ts if you're in typescript or JS if you're in JavaScript and in this file we need to import and also export our Express API so you'll see in the setup here app.ts defines an Express app and then exports it basically you need to have your app set up in a similar way if you're not using the express API starter so here we'll import that app like this so we've imported it and then now we export it so now we've exported it we should be good to go so typescript will complain about this file if you haven't set up your TS config yet so if you are using typescript you're going to need to tell it about the API folder so in your TS config be sure to include the the API folder like this so the next thing we'll need is a folder called public so I'm just going to create a public folder and then I'm going to create a DOT get keep file inside of here mainly this folder is just going to stay completely empty because my Express API doesn't have any static files it's all it's all a Json responses dot get keep is a git convention to keep an empty directory around but we need that because virtual expects there to be a public directory next up we need a versatile config so we'll have a versal.json file and this is where we'll specify our rewrite so every request that comes into our API needs to be redirected here right because if there's like a nested express route that's being requested it starts here so that the app can handle it so in our config we're going to basically redirect everything to that one file if you look at this article which is linked down in the description using Express with it for sale they give you an example that you can copy paste this one here we'll just take that paste it in and you'll notice that in their example they're redirecting everything that's slash API to the API folder in our case we want to redirect everything because our entire Express app lives under there so we're actually going to redirect slash anything to slash API so now any request that comes into our app is going to get served by this serverless function which is our entire Express app so slash API V1 emojis that is going to get handled by API which in turn is handled by our Express app which in turn mounted our API Handler Etc so these are the rewrites that we need all right so the last setting is to actually override the build command so by default if versel detects this build command it's going to try and run it but we don't need it to do that because part of the deployer process is to look at the entry point here Purcell handles all of the transpilation and everything else you actually don't need to run the build command for a back-end typescript app so in this case in order to override that build command we need to add versel build and this just needs to be a no op so I'm just going to Echo hello so first I was going to run this command but but I don't need it to run the typescript compiler so whenever we deploy this is the command that's going to run because we actually don't need everything else so that should be it once you have all of those settings we should be able to deploy and create the project from the command line so from the command line if I do versatile dash dash prod I'll need to create a new project choose my account give it a name and then just choose this directory we can use all of the default settings and this is that one setting I was specifically talking about so because it sees that build command it would try to run it on the server but we don't want it to do that because we already have our entry point so we're not going to modify these settings and that's it we're deployed so if I try to visit this in my web browser you can see at least the home page loads but it's important to check our nested routes so now if I try to go to API V1 emojis it works so our config is is basically rewriting that request to the main app which in turn serves up the Emojis route thanks for watching this if this was useful for you definitely throw a comment down below letting me know like I said there's like a very Niche use case where you would actually want to do this but if you do want to do this and you do it it works please let me know in the comments definitely check out reactroots.com I currently have a course that teaches the basics of react in typescript so if you want to learn more you can visit reactroots.com also if you visit coding.garden it has the rest of my links to all of my stuff I'm live on Twitch right now so if you visit twitch.tv coding Garden you can watch live and participate interact in the chat and stuff like that but that's all I have for you see you in the next one foreign [Music]

Channel: Coding Garden

Views: 68,108

Keywords: javascript, coding, programming, node.js, tutorial, learning, debugging, web development, web, full stack, backend, frontend, live stream, live coding, react project, react course, react, typescript, express api, express api template, express typescript, deploy express api, express vercel, express vercel deploy, how to deploy express, how to deploy express apit to vercel

Id: B-T69_VP2Ls

Length: 6min 6sec (366 seconds)

Published: Wed May 10 2023