Encore Crash Course - TypeScript Backend Framework & Toolset

what's going on guys so I've been experimenting lately with Encore which is a typescript backend framework and it's it's it's also a lot more than that it's defined as a development platform that provides a complete tool set for back-end development and it handles everything from you know local development and testing to Cloud infrastructure and devops and it uses infrastructure as code to kind of abstract away a lot of that boilerplate associated with Cloud infrastructure and a lot of the configuration and I don't know about you guys but when it comes to devops it's definitely not my favorite thing to do and Encore actually lets you spin up a Docker container and a fully functional postgres database with a single line of code and then you can deploy that that API or or service to the cloud with a single command and it also has built-in type validation it has uses a rust multi-threaded runtime it has a a built-in developer dashboard it's faster than a Express and just about every other JavaScript based backend framework so in this video I want to just talk a little bit more about what onore is and how it works kind of the nerdy stuff and then we'll jump in and we'll build a URL shortener service similar to the one in the documentation and I would definitely encourage you guys to build it along with me so grab a tea or a coffee and let's get started with Encore so so we're going to just look at some slides and talk a little bit more about what Encore is and what it offers and then we'll jump into writing some code and if you want to skip through the slides you can do that so Encore is like I said a backend framework but it also offers just a complete backend tool set with a bunch of features when it comes to both development testing and deployment and infrastructure so it's kind of an Allin one type of tool now there's actually two parts you can use there's Encore TS which is a typescript backend framework that's what we're going to be using but there's also ENC car. go which is a go backend framework and both of them are used to build robust and type safe applications and they have for the most part the same kind of features it's just one is typescript and one is go and I do want to get into the go programming language in the future so I might do another video later on with encor go now I want to say this before anything else I'm not saying that you should stop using Express or any other framework for that matter or that Encore is better than any other framework that's not my job my job is just to relay the information that they put forth and to show you how to use it people always want to make it about what's better or worse and I think that whole way of thinking is just very shortsighted and I think it's more important to to just know what's out there and know how to be able uh to make an informed decision based on your needs now with that said you can use Encore in place of something like Express and you do get a lot more right out of the box you get type safety it has a very fast rust runtime API validation and I'll talk more about that stuff through the video um but they do have some benchmarks in terms of performance and obviously this can change depending on the task or project and all that but these are the benchmarks that they put up and they say that Encore is faster than Express fastify and Bun JS and as you can see the benchmarks that they put up show that it's up to nine times faster than Express and twice as fast as fastify and it's also faster than bun JS which is pretty fast and I'll talk more about how they get this performance boost as well now Encore has built-in type validation and it's all done in a way that is fully declarative and allows Encore to automatically parse and validate the incoming requests and ensures that it matches the schema with no boiler plate so it offers protection from a tax by validating requests before it even hits your code before it even hits that JavaScript layer now this is one of the coolest things in my opinion about Encore it's it's more than just an alternative backend framework it uses infrastructure as code and simplifies a lot of the the devop stuff so if you think about deploying an Express project to something like AWS you have to set up a bunch of configurations and boiler plate and it can actually be kind of a nightmare so encore is specifically designed for building modern Cloud native applications and it abstracts away a lot of that boilerplate associated with Cloud infrastructure so that developers can focus more on business logic and this is something that that I really like and you can see from this this code sample you can create a postgres database with one line of code you can also create published subscribe topics cron jobs and More in just a few lines of code and you'll also be able to integrate C ING with reddis in the near future and it's able to do this in a local environment by using Docker so basically you run a migration file and it will automatically set up a Docker container with your database and all you have to do is have Docker installed on your machine you don't have to create any any containers uh manually or anything like that it just does it for you and I'm going to show you an example of this when we build our URL shortener and then when it comes time to deploy you can do that with the single command which I'll also show you so Encore has two parts it has the typescript SDK or go if you're using go and we use that to create our backend services and apis but it also includes a high- performance multi-threaded runtime written in Rust and this runtime integrates with the node.js runtime for executing JavaScript so it's 100% compatible with the node.js ecosystem and using Russ gives it a huge performance gain over the node.js runtime and throughput is increased by seven times and it reduces response latency by 85% Encore also has zero npm dependencies so that also improves performance and security as well and then as far as how it all works it starts off with no. JS uh initializing the rust runtime and it begins listening for incoming requests parsing and validating them against the API schema and then the runtime pass on the request to your code and it waits for the response and then when your application uses infrastructure resources like querying database it hands that over to the runtime for faster execution so the node.js event Loop which is single-threaded can focus on executing your business logic and everything else happens in uh encore's multi-threaded rust run time so this is how you get that big performance boost now the last thing I want to show you is the developer dashboard so when you create create a project you get this this web-based tool that runs on a separate port and provides a visual interface to your API and services and from here you can make requests um so you don't need something like Postman it's all built in it has tracing and logging it shows your your published subscribe flows code Snippets documentation and more so it's a it's a really cool feature that we'll we'll take a look at all right so that's kind of just the the the gist of what Encore is so now what I want to do is just jump in we're going to just take a look at how to create a a basic endpoint and so on and then we'll build our URL shortener all right guys so this is Encore dodev this is where you can find all the documentation all that good stuff and it's also where the cloud platform is so if I go to let's say app.on cor. I don't have any any um applications or apis created at the moment so it's just showing me these demos but as soon as you create a new project it'll show up here all right and when you install Encore and create a new project it's going to ask if you want to create a a cloud account and you're going to want to say yes to that all right now as far as installation goes if you're on Mac you just use home brew if you don't have home brew go to brew. sh and just grab the command to install it Windows you have this Powershell command just throw that in your terminal and it should take you through the steps uh and then Linux you can use Curl to install so I'm on Mac OS so I'll copy that and I do already have it installed but I'll just run it anyway and as soon as you install this you should have access to the Encore command so if I just run Encore um you can see all the options that I have here and half of these I I have never even used obviously I'm pretty new to this myself but uh but that's where you can find all the commands and you can also use version and see what version you have installed you may have a later version than Me Now to create a project we're going to use the app command or app create and you're probably going to be asked to create a cloud account say yes to that it might take you to the browser you might have to just fill something out I forget exactly what the process is but you definitely want an account because that's one of the whole purposes of this is to have that that infrastructure built in um so you can just deploy in in one command now it's going to ask us if we want to use go or typescript I'm going to sayp script and then you have some templates to choose from a rest API an uptime monitor a URL shortener which is what we're building so we don't want to choose this because we want to build it from scratch so we're going to choose the empty app option and then for the app name I'm going to call it Encore URL shortener and then it's just going to go ahead and create the dependencies or install the dependencies and we now have a web URL so I can click on that and it takes me right to the dashboard for this this application or this API whatever I'm building where you can see the services you can see any published subscribe topics cron jobs just all all kinds of stuff and then when I want to deploy I can do it with Git in a single command or well a couple git commands and I'll I'll show you that later on when we get to it so what I'd like to do now is just run vs code and open up the folder that I just created and not M you don't have much here in our package.json you can see we have encore.com from here I can make requests whatever endpoints I have will show here of course I don't have any yet because I haven't written any code but they'll show here I can make a request to them I can pass in parameters it'll show a list of all my requests um you have the service catalog flow for for publish subscribe topics Snippets so if you need a snippet to create a database or schema or something like that there's also this AI lab which I haven't checked out yet um but yeah so it kind of works as a like a postman type tool and you have tracing and logging so all types of stuff is available and and I think this is a really cool addition to the framework or to the the tool set so let's jump in and let's create an endpoint before we start to build our URL shortener I just want to show you the basics of creating an API endpoint and we're going to create our folder structure how we want our endpoints or our URLs to be structured so let's say I want slash greeting then I'm going to create a folder called greeting and in that I'm going to create a file called greeting. TS now if we want to create an endpoint we bring in the API function from ENC cor. devapi and then we need to export a function and I'll call this greeting you can call this function whatever you want and then set that to API and then in in here we'll pass in two arguments one is going to be an object that has the method which I'm going to say I want this to be uh get request or get uh response to a get request and then the path which I want this to be just slash greeting and then also expose which we're going to set true because we want to publicly expose this uh this route or this endpoint okay and then the second thing we're going to pass in is an async function and in that we're going to return whatever we want to return in this case I'm just going to pass uh an object that has data and just say hello world for the greeting now we are using typescripts so let's say for this function we want this to return a promise that is going to have the type of response and I'll create that interface up here for response which is just going to have a data which is is going to be a string all right so we'll save that and now we should have that endpoint so if we go to our um dashboard here I think we do have to restart the server I believe so let's do that let's come down here on core run and if we come back here now you can see greeting. greeting so it goes by our file structure as well as the the path that we have described so you can see get requests to greeting now if I want to make a request I can just simply H hit call Api and I get back my 200 response with an object with data and hello world okay and it's going to show me over here traces so any request you make is going to show um we have all traces you can change that to just API calls also tests if you're running tests so I mean that's that's kind of the just the the gist of creating uh an endpoint now let's say we wanted to add a Pam like SLG greeting Brad so we pass a name in and we wanted to say hello Brad or or whatever we pass in so in order to do that we can just go to the path here and let's say colon or slash colon name and then down in the function here we're going to pass in name like that and since we're using typescript we're going to add on to this and say it's going to be an object that has a name property and that's that's going to be a string and then I can come down here let's change from quotes to back ticks and then we have access to that name so now if I save that and we go back to see do we have to reload uh yeah I think we have to re restart the server here okay so now I should have yeah right here get SLG greeting name and I can click in here and I can change that to let's say Brad and then call the API and I get hello Brad and of course I could you know I could do Local Host Port 4000 slash greeting John and I get my hello John so of course any htb client will will work now before we create our our URL shorten I just want to do one more thing and create one more route or endpoint that takes in a query param so let's say we want to do like slash greeting SL search but we want to be able to take in filter like this as a uh as a query param so let's create that end point so in greeting I'm going to create a file called search. TS and I want it to be SLG greeing search that's why I'm putting it in this greeting folder because again your folder structure is going to pertain to your your API structure so let's import a API like we did before but I'm also going to import query and then we're going to create our interfaces so this one will be for the query params which I want to be filter so let's call this search params and we're going to take filter and then this is where we use that query and then in angle brackets this is going to be a string so that's the params then we'll have an interface for the response just like we did before just going to call it search response and that will respond with an object that has a uh matches property and that's just going to be a string okay now let's export a function I'm going to call it search and we're going to set that to API and then I'm going to use generics here so I'll put in angle brackets so we want to pass in our search params and our search response and then in API we want to pass our object which is going to have the method we want to use which in this case is going to be get and then the path that we want to use which is going to be slash greeting slash search and then expose which is going to be set to true and then we want our function so actually need to be a sync function and then we want to return actually let's pass into this we should be able to pass in filter and that will pertain to the query pram and then I want to return from here just an object with matches and for that we'll just put in some back ticks and let's say matched and then whatever that filter string is all right so we'll save that and let's restart this go back to our Explorer here and we should see right here greeting . search and see it gives me uh it gives me this input where I can put my filter so I'll just doesn't really matter what I put here I'll just say hello and then hit call Api and we get back a 200 response with an object with matches and a string of matched hello so whatever I put in that filter okay so that's just another example of creating an endpoint and using query prams so now I want to create our URL shortener now I just quickly want to explain how this is going to work so I'm just going to open up uh text edit real quick okay so basically we're going to have two endpoints let me make this a little bigger so our first endpoint is going to take a post request to/ URL and what we want to include with that request is going to be the URL itself and let's say we want to shorten uh https google.com so so we're going to send that and then what the endpoint is going to do what that function is going to do is store the URL and an ID or like a short we say a short ID in the database and we're going to be able to use a postgres database it'll just get set up through Docker you do have to have Docker installed but you don't have to take any other steps just simply go to the website download and install Docker and just make sure it's running all right so it'll it'll create postgres and it will um add the URL to the database then we just want to get requests to URL slash and then whatever that short ID is and that should then fetch the long version of the URL so that's essentially what we want to do these two end points so we're going to start with this one uh so let's close that up I don't want to save it and let's create a folder called URL and then in that we'll create a file called url. TS and we're creating creating an endpoint so we want to bring in API and then to create that ID that short ID for the URL we're going to use random bytes So Random bytes from crypto uh let's say node colon crypto and that's what we'll use to generate that ID so let's create an interface for the response so we'll say interface I'll call this URL response and it's going to be an ID which which will be a string and a URL which will be a string so that's that's what we're going to get back from this endpoint and then for the params that it takes in let's say interface we'll call this shorten or let's call it pams and that's going to be just URL which will also be a string okay so those are our end typescript interfaces now let's create the function so we'll say export const and I'll call this shorten and let's set that to API and then we're going to pass in here let's pass in the method which is going to be post this time so we're making a post request then the path which is going to be just slash URL and then expose which is going to be true okay and then we want our function so let's go down here and let's say async and then create our function oops okay and then that function is going to take in the URL and then as far as the type for that will be the URL params and then let's go over here and in the function well actually let's do our return which is going to be uh promise and URL response okay so let's create that ID so we'll say const ID and we can do that by using random bytes and the length of it I mean you can change it if you want I'm going to say six and then do 2 string and we want this to be a base 6 uh base 64 URL all right um so basically it'll be form it will only use characters that can be used in a URL and then we want to return from this uh ID and URL okay we're not doing any say any database stuff just yet we're simply creating the ID and returning that ID with URL we'll do the database in a minute I just want to first test this out so let's save that and run our application and let's go back to our browser here or development dashboard and we should see URL shorten so now this is going to take in a UR L let's say https and I'll do traversy media.com call Api and this is what I get back I get back my URL and I get back the ID so now the next step is to save this to the database now you want to have Docker running so if you don't have Docker on your machine just go to docker.io right now so you can see right here and I'll keep this open this on this machine I have no containers this is basically brand new there's no containers running we're not going to have to do anything here it'll it'll happen just all on its own which is really cool so just make sure you have that open now let's go back to our code and we want to create a database schema through a migration file so in url we're going to create a new folder called migrations and then in that we're going to create a new file and we're going to call that onecore create uncore tables. up okay because this is this is creating it um you can do down for if you wanted to you know reverse it and delete the table but we're going to say do up. SQL or SQL I know a lot of you guys get mad when I say SQL instead of SQL so we're going to just do one thing here and that's create the URL table so let's say create table URL and in parentheses we're going to have we're have two fields in this table so first is going to be the ID which is going to be text and it's also going to be the primary key and then we're going to have the original underscore URL which is also text and we're going to say that that can't be null so not null and yeah that should do it so let's save that so what will happen is if we use use the the SQL database utility in our code it will it will automatically create that database for us through Docker so just make sure that you have Docker open and running or up and running and you can see I have it here notice there's no containers right now but that's about to change so in our code let's import SQL database from ENC cor. storage sqldb and then we need to create a DB a database instance so we're going to say const DB and let's set that to a new SQL database the database name URL and then an object with migrations and that's just going to be the location of the migrations folder okay so it's in the same folder so just do slash migrations then we just want to go down to the endpoint and after where we create that ID which is our shortened ID for the URL we're going to say await DB and then there's a method called exec and we can put back ticks here and we can write SQL code in here so we're going to say insert into and we want to insert into the URL table and the fields we want to add are the ID and the original underscore URL and then I'll go on the next line here and we want to add our values and the values are going to be moneys sign curly braces ID and then the URL okay so whatever the the URL that comes in through the request is going to then get put into the database in that original URL field so let's save that and then I'm going to just restart this so Encore run and you'll notice that it says right here so analyzing service topology creating postgres database cluster running migrations so all that was just done just because we have this line of code in here and now if you go to Docker you should have a container running with postgres so to me this is like this is the coolest part of of Encore this is what I really like um now if you want to go in and look at those tables you can do that so I'm just going to add a new terminal here and I'm going to say onore DB shell and then the name of the database which is URL and then let's select all from URL because that's the name of the table as well and you can see we get back zero rows because we haven't added any URLs but it's there and we have our columns so now let's make a request so I'm going to go back here I'm just going to refresh and I'm going to make another request to /url with this traversy media.com and I'm going to call the API so I get back the URL and the ID but now if I go back into the shell here and I run select all there it is so that got added to the database and this is the ID right if I make another request let's change it to google.com call and then I'm going to go back and select now we have that entered into the database so the next thing to do now that we can add shortened or I should say you know add records with the ID is now we want to make a get request to get that shortened URL with that ID and I'm just going to exit out of this down here all right so we're going to create we want this endpoint to be slurl slash and then the ID and it's going to be a get request so we're going to put it in this same file this url. TS so let's come down here and I'm just going to copy this and let's change this to we'll say get I guess get shortened URL you can call it whatever and this is going to be a get request and the path is going to be URL slash and then uh colon ID and then here instead of passing in url it's going to get passed in ID and instead wh and instead of URL pams we want to set this to an object that's going to have an ID that's going to be a string all right and then down here we can get rid of this let's just get rid of all of it except for the return and then let's fetch it from the database so we're going to say cons row set that to a weight and then on that DB object we have a query row method and we're going to use back ticks here because we're we're writing SQL so for the SQL it's going to be select original uncore URL from from the URL table where the ID is equal to the ID okay and then I want to just check to see if there is a row so if not row then let's say throw and there's this API error that we can use which should have got Auto imported yeah so you can see it got imported from Encore Dev API so if there's no row we're going to throw this this API error and there's a method called not found and then we can pass in a a message we'll just say URL not found and right here what we're going to pass back as the URL is going to be the result which will be row Dot and then the field of original URL so that should do it so I'm going to come back to well let's restart the server here all right and then we're going to come back here and we should now have get shortened URL so it takes in a URL with an ID so I'm going to go ahead and just put in something that doesn't exist so I get back a 404 not found right and with my message and then let's get an ID so I can just look in uh yeah I guess we'll just look in the data base here so we can do Encore DB shell URL and then I'm going to say select all from URL and then grab one of these okay so I'll just copy that and then I'm going to go back here and I'm going to put that as my ID and there it is so I get back my URL of traversy media.com if I were to put the other one so this one right here if I grab that and put that here and I get back my URL with google.com so now I want to show you how simple this is to deploy we're going to jump back over here and we're going to use git so let's just say get add all get commit and we'll say initial commit okay now the one command we have to do is simply get push oncore so it triggered a deploy and if we click well let's go back here to actually I just want to go to app.on deev and you can see the app right here click on it and it's deploying right now so initial commit that's what I just did and you can see it's still spinning and if we click that you can see everything that happened looks like it's it's all done and basically it's it's pushed to the staging in the platform so I believe down here environments under staging if I go to overview yeah this is the the end point right here so I'm going to copy that and then I'm just going to use Curl for this you could use any HTTP client but I'm just going to say curl and the type of request is a post request I'm going to paste in did that not copy just copy that again and then it's going to be SL URL because that's the endpoint that we created and then for the the body the data let's say- D and then in single quotes we want to add our Json object with the URL so the URL I'll use is https twter Twitter . Travy media and add the for the headers I'm just going to add the content type so content-type is going to be application SL Json all right so run that and there we go so we get back the URL the original URL and this idid so now I should be able to copy this ID and now let's make uh get requests so curl and then uh actually I want to copy I want this so I should be able to do URL and then slash and then this ID so I'll grab that and then let's paste that in make that request and there we go we get back traversy media if I put something in here that doesn't exist then I get back a not found error all right so that's our our little API our little service is working now this is the staging environment in on this platform so you can deploy it to production I'm not exactly sure about like the pricing structure and how all that works I haven't looked that far into it um I just thought that this was really cool to have all this wrapped up in in one platform and just how easy it is to um to to work with the the infrastructure and just create databases and Docker you know by adding one line of code deploying with one line of code so hopefully you guys enjoyed this and you'll you know look more into Encore of course this is like a first look um I will be working more with it as time goes on and I'll probably be making more videos in the future but that's it thanks so much for watching and I will see you next time