Deploy TanStack Start on Cloudflare Workers in 10 mins

Tenstack start is a fullstack web framework with a lot of amazing features. People on the internet are loving it and it is getting more and more traction for all the good reasons. Ten start is built on top of the popular ten router and it allows you to do things like serverside rendering streaming and has also support for server functions. Hey everyone, my name is Hersel and in this video I'm going to show you how you can deploy your tenstack start application on cloudfare workers. We will look into creating a new tenst start application using the create cloudfare cla. We will also look into how you can deploy your existing application on cloudfare workers. And lastly, I'm going to show you how you can add bindings to access maybe CloudFare D1, R2, KV, WorkerJI, any CloudFare product that you want to use in your application. So, let's jump into it. Now, to create a new ten start application, you can use the C3 command npm create Cloudfare. Pass on the name of your application and the framework you want to use. Over here it is going to be texe start. We will install the latest package and it is going to bootstrap the project for us. After it installs all the dependencies and creates all the necessary files, it is going to ask you if you want to set it up as a g repository. I'm going to say yes. And for the deployment I am going to say no for now. Now let's CD into that project and open it in VS code. In here as you can see it bootstrapped the project for us. We have the source directory which contains the components, the data and the routes for us. There is also the package.json file which contains all the required packages. And there is the V config file. Now, as you can see, this project uses Cloudflare's V plugin which gets configured in here. And lastly, there is the Wrangler.json file which contains all the configuration for this application. As you can see, it has configured the name of our application and added the rest of the configurations that are needed for this project to be deployed on Cloudflare. Let's start the local server to see this app in action. To start the local server, you can run npm.dev. This is going to start the V server on port 3000. So, we can navigate to this particular port and we have our tanstack start project running locally. It has examples for server functions as you can see over here. It also has an API request route where you can see all the information coming in from an API over here. Again, this is a mock API. In reality, you might want to use maybe CloudFare D1 where you're fetching the data and showcasing in here. And then there is also an SSR demo that you can check it out as well. Well, let's close the server and deploy it to Cloudflare. To deploy this application, all you have to do is run the command npm.eploy deploy. This is going to build your uh project and then deploy the assets to CloudFare Workers. Now, because I have multiple accounts, I get the option to select where I want to deploy this project. So, I'm going to go with my free demo account. And once the upload is complete for the static assets, it generates the URL for my application. So I can visit this URL. Now you can see the same application up and running on this URL which is deployed on cloud web workers. So I can go to the menu checks the server functions. Refresh this and it gives me the time from the server. I can also check the endpoints such as the API request endpoint as well as start the SSR demo. Well, we just saw how you can create a new tenstack start application and deploy it on cloud workers. But what if you want to deploy your existing tenstack start application? Let's look into that now. Over here I have an existing tenst start application which looks and feels the same. As you can see this is the homepage which is again similar to what we saw earlier but the server functions example is a bit different. Over here we have a more functional example of a to-do list instead of just showing the time. The way I created this app was to follow the instructions on the dense techch documentation. All you have to do is run the npm create command to create your dense tech start application. However, you won't be able to yet deploy it on cloudare workers. we need to install a few dependencies and add a few configurations before it's ready to get deployed. So the first thing you want to do is install Wrangler as a development dependency. Once that gets installed, again remember this is going to use the Cloudflare V plugin. So we also need to install that. Once this V plug-in gets installed, we need to configure it in a V config file. Over here, I am going to import the CloudFare V plugin and configure it under the plugin. We're going to set up the V environment to be SSR and then add a couple of scripts in our package JSON file. These scripts will allow you to deploy your application to Cloudfare workers. You can also preview it before deploying it using the preview command. And if you are using bindings, you can generate the types for those bindings using the cf type gen command. One last thing we need to do is to add the wrangler.json G file before we run the deploy command. I'm going to paste the configurations from our previous example. Give it a name existing tens start app. Save this as a wrangler JSON C file. C is for this commands in a JSON file. Once we have this file as well, we can run the command npm run deploy to deploy the application. It is going to do the same as earlier. It is going to build the application and then deploy to Cloudfare workers. Now again over here it is asking me to select an account where I want to deploy it. So I'm going to again select my free demo account and it is going to deploy this assets to that particular account. Once the upload is complete I am going to get a URL to visit the application. And over here is a deployed URL. So I can go to this URL and check our application. Well, so far we have looked into how to create a new ten start application and deploy to cloudfire workers. We also saw how to deploy an existing application by adding required dependencies, updating the V config, adding a few scripts and finally adding the Wrangler file. Now we're going to look into how you can use bindings for your application. For the purpose of demonstrating on how you can use bindings in your tense tech start application, I'm going to show you how to do that with cloud D1, but you can do the same with any of the other CloudFare products. The first thing I did was create a new D1 database calling it dense tech to-do. Once this database gets created, it asks me if I want to add the bindings to my wrangler.json file. I select yes and it created the binding for my application. As you can see in here, now I have my D1 database binding in my Wrangler file. Once the bindings were configured, the next thing I did was use the Wrangler CLI to create a to-do table in my uh D1 database. After creating this table, I added a task learn start to that particular to-do. Now that we have our database, the table and the binding configured, let's run the command cf type gen to generate the type. This generates the required types for our bindings. And we can use this bindings in a tst start application. So in my server function I'm going to import env from cloudfare workers. Now I want to get the data from our database in the server function. So I am going to initialize a DB. Now that we have the reference to our DB, we're going to make a query to fetch all the tasks from our to table. Once we have all the todos, we need to return these todos to our server function. So if we now start our local server using the npm rundev command and navigate to localhost 3000, you can still see the same application but if you navigate to the server functions over here we can see that we are now getting the data from our database. So we have the bindings running locally. Now if you want to deploy this application you all you have to do is run the npm run deploy command and this is going to deploy your application with this binding. One quick note because we created the table and inserted the value on a local copy of D1. If you deploy it right now and try to access the sero function it is going to give you an error. So make sure you use the wrangler command and pass on the remote flag to create the same table in production. You can do the same with the insert statement. Pass on the remote flag to this as well. And now you have the same value in your remote database. So now if you run the npm.eploy deploy command. This is going to deploy the application with those bindings and you will be able to see the data in production as well. If we navigate back to this URL, we see the 10st start application and in the server function route, we will see the data coming in from the database. So in this video you saw how to create a new tens start application and deploy it to cloudfare workers. You also saw how you can deploy an existing tense tech start application and deploy it to cloudfare. And lastly you also saw how you can add bindings and use those bindings in your application. If you want a deeper dive into tens start or just want us to create uh similar videos for any other framework, do let us know in the comment below. And again, all that I have shown is already available in the documentation which I am going to link in the description. Till then have fun.