Merge pull request #2555 from appwrite/tanstack-deploy-blog

tanstack start appwrite sites blog

Author: atharvadeosthale

src/routes/blog/post/deploy-tanstack-start-app-to-appwrite-sites/+page.markdoc

@@ -0,0 +1,73 @@
+---
+layout: post
+title: Deploy a TanStack Start app to Appwrite Sites
+description: Learn how to deploy a TanStack Start app to Appwrite Sites.
+date: 2025-10-31
+cover: /images/blog/deploy-tanstack-start-app-to-appwrite-sites/cover.png
+timeToRead: 5
+author: atharva
+category: tutorial
+featured: false
+---
+
+TanStack Start is growing in popularity and developers are choosing to use it more over other alternatives. To empower these developers, we just announced support for TanStack Start in Appwrite Sites.
+
+In this article, you will learn how to deploy your TanStack Start app completely free of cost. We will use Appwrite Sites to achieve that. Appwrite is an all-in-one open-source BaaS (backend as a service) that handles the backend part of your application so that you can focus on the app's core logic rather than unnecessary technical details. 
+
+Appwrite Sites is a frontend hosting service that can help you deploy your TanStack Start (or any web framework) app in minutes with full SSR (server-side rendering) functionality.
+
+# Testing your TanStack Start build
+
+Before you deploy your TanStack Start app, it's essential to see if it builds successfully. Building is a process where the framework bundles your app into files that can be run on a server and a browser, depending on your usage of SSR (server-side rendering).
+
+To build your TanStack Start app, run the following command in your terminal:
+
+```bash
+npm run build
+```
+
+If your build succeeds, you can deploy your TanStack Start application to the internet. If your build fails, you must fix all the errors in your application. When deploying a TanStack Start app, the deployment provider builds your app on their servers, and cannot deploy if the build fails.
+
+# Configuring your Site on Appwrite
+
+This article assumes you have your TanStack Start app code stored in a GitHub repository. If not, please do so, as it is needed for deployment. Deploying through code stored on GitHub also introduces advantages such as automatic deployments, preview deployments, etc.
+
+Now, let's link your GitHub repository to Appwrite Sites.
+
+- Go to [Appwrite Console](https://cloud.appwrite.io) and sign in using your preferred authentication method.
+- Create a new project, or use an existing one.
+- Click on the **Sites** option on the sidebar.
+- Click on **Create Site**.
+- Click on **Connect a GitHub repository**.
+
+Now, you should be able to see the most recent GitHub repositories based on activity.
+
+![Selecting the repository](/images/blog/deploy-tanstack-start-app-to-appwrite-sites/repository-selection.png)
+
+Click **Connect** against the desired GitHub repository. The TanStack logo should be the icon of any valid TanStack Start app.
+
+Once you connect your GitHub repository, you will be presented with options for deployment.
+
+![Configuring the site](/images/blog/deploy-tanstack-start-app-to-appwrite-sites/configuring-site.png)
+
+Fill in the details as desired. Although there are some things you must know before moving forward.
+
+- If you're using a different branch for your intended production website, choose the specific branch.
+- If you're using a monorepo, Sites might not automatically detect your application. In such cases, manually provide the root directory for your TanStack Start app that contains the configuration file. For example, if you're using Turborepo, your app might be located inside one of the folders in the `apps` folder, so your root directory should be something like `./apps/web`.
+- Most users don't need to change the **Build settings**, although if you want to run different commands for installation and builds, you can configure those in this section. If you don't know anything about this, it's worth skipping this section altogether.
+- If your app uses environment variables, add them in the **Environment variables** section. If your app uses sensitive API keys, you are likely using environment variables.
+    - In TanStack Start, public environment variables start with `VITE_`. These environment variables are accessible in the browser environment, so don't store your sensitive API keys in a variable that starts with that prefix.
+- Configure an Appwrite Network subdomain to get started. Don't worry, you can configure a custom domain once your app is deployed.
+
+Now, hit the **Deploy** button, and the deployment process will begin. You can see the build logs as your website gets deployed.
+
+# Next steps
+
+![Site successfully deployed](/images/blog/deploy-tanstack-start-app-to-appwrite-sites/deployed.png)
+
+Once your TanStack Start application is deployed, you can view it on the provided domains on the deployment success splash screen or in the Sites section of the Appwrite console.
+
+Now, you can perform further steps to level up your experience with Appwrite Sites:
+
+- [Custom domains with Appwrite Sites](/blog/post/custom-domains-with-sites)
+- [How to host SSR web apps on Appwrite Sites](/blog/post/host-ssr-web-apps-sites)