passive-yellow

Deploy Tanstack Start on Netlify as full stack project with server functions

I am trying to deploy the app on netlify a full stack app with ssr and server functions etc and can't find a proper docs for this use case I found this doc https://tanstack.com/start/latest/docs/framework/react/guide/hosting But not sure if it is fit for my case. Any help regarding this

Hosting | TanStack Start React Docs

Hosting is the process of deploying your application to the internet so that users can access it. This is a critical part of any web development project, ensuring your application is available to the...

11 Replies

other-emerald•2w ago

what's not working for you? the guide should cover all you need

passive-yellowOP•2w ago

not showing anything on url https://anharshop.netlify.app/

other-emerald•2w ago

cc @Netlify (Partner)

apparent-cyan•2w ago

@Ali Yar Khan can you please share more details? did you follow the steps exactly? what do your vite config and netlify.toml look like? are you using SPA mode? are there any errors in your Netlify Function logs? thanks!

passive-yellowOP•2w ago

@Philippe Serhal netlify.toml

# example netlify.toml
[build]
  command = "npm run build"
  functions = "netlify/functions"
  publish = "dist/client"

  ## Uncomment to use this redirect for Single Page Applications like create-react-app.
  ## Not needed for static site generators.
  #[[redirects]]
  #  from = "/*"
  #  to = "/index.html"
  #  status = 200

  ## (optional) Settings for Netlify Dev
  ## https://github.com/netlify/cli/blob/main/docs/netlify-dev.md#project-detection
  #[dev]
  #  command = "yarn start" # Command to start your dev server
  #  port = 3000 # Port that the dev server will be listening on
  #  publish = "dist" # Folder with the static content for _redirect file

  ## more info on configuring this file: https://ntl.fyi/file-based-build-config

# example netlify.toml
[build]
  command = "npm run build"
  functions = "netlify/functions"
  publish = "dist/client"

  ## Uncomment to use this redirect for Single Page Applications like create-react-app.
  ## Not needed for static site generators.
  #[[redirects]]
  #  from = "/*"
  #  to = "/index.html"
  #  status = 200

  ## (optional) Settings for Netlify Dev
  ## https://github.com/netlify/cli/blob/main/docs/netlify-dev.md#project-detection
  #[dev]
  #  command = "yarn start" # Command to start your dev server
  #  port = 3000 # Port that the dev server will be listening on
  #  publish = "dist" # Folder with the static content for _redirect file

  ## more info on configuring this file: https://ntl.fyi/file-based-build-config

vite.config.ts

import { defineConfig } from 'vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import viteReact from '@vitejs/plugin-react'
import viteTsConfigPaths from 'vite-tsconfig-paths'
import tailwindcss from '@tailwindcss/vite'
import netlify from '@netlify/vite-plugin-tanstack-start'
const config = defineConfig({
  plugins: [
    // this is the plugin that enables path aliases
    viteTsConfigPaths({
      projects: ['./tsconfig.json'],
    }),
    netlify(),
    tailwindcss(),
    ...tanstackStart(),
    viteReact(),
  ],
})

export default config

import { defineConfig } from 'vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import viteReact from '@vitejs/plugin-react'
import viteTsConfigPaths from 'vite-tsconfig-paths'
import tailwindcss from '@tailwindcss/vite'
import netlify from '@netlify/vite-plugin-tanstack-start'
const config = defineConfig({
  plugins: [
    // this is the plugin that enables path aliases
    viteTsConfigPaths({
      projects: ['./tsconfig.json'],
    }),
    netlify(),
    tailwindcss(),
    ...tanstackStart(),
    viteReact(),
  ],
})

export default config

apparent-cyan•2w ago

thanks! why do you have that spread there? 🤔 ...tanstackStart() and can you share the build logs? are you deploying with netlify-cli or via git?

passive-yellowOP•2w ago

I am not sure ... It was there when I created the project I deployed using git

passive-yellowOP•2w ago

deploy logs

netlify_logs.txt

apparent-cyan•2w ago

Thank you! Hmm, so everything looks as it should except that it deploys 0 functions. There should be a line like this:

1:40:33 PM: 6:40:33 PM [vite] ⬥ Netlify ✓ Wrote SSR entry point to .netlify/v1/functions/server.mjs

1:40:33 PM: 6:40:33 PM [vite] ⬥ Netlify ✓ Wrote SSR entry point to .netlify/v1/functions/server.mjs

and a line like this:

1:40:33 PM: Packaging Functions generated by your framework:
1:40:33 PM:  - server.mjs

1:40:33 PM: Packaging Functions generated by your framework:
1:40:33 PM:  - server.mjs

btw the The Netlify Functions setting targets a non-existing directory: netlify/functions line is not a problem. We should improve that message... so to me it sounds like @netlify/vite-plugin-tanstack-start isn't running at all 🤔

passive-yellowOP•2w ago

how can i fix this or it is at your end ? on my local this line is there

1:40:33 PM: 6:40:33 PM [vite] ⬥ Netlify ✓ Wrote SSR entry point to .netlify/v1/functions/server.mjs

1:40:33 PM: 6:40:33 PM [vite] ⬥ Netlify ✓ Wrote SSR entry point to .netlify/v1/functions/server.mjs

was success in deploying it

apparent-cyan•2w ago

nice! how did you resolve the issue?

Gaming

Programming

Deploy Tanstack Start on Netlify as full stack project with server functions

Did you find this page helpful?