10 months ago
Hello,
I am reaching out for assistance with deploying my Vite and React application, which is written in TypeScript. Despite following the standard deployment procedures, I am encountering a blank page issue when accessing my application after deployment.
I have already tried the following troubleshooting steps without success:
Ensuring that the
"homepage": "."property is correctly set in mypackage.json.Checking for any browser console errors (none found).
Verifying that all resources are correctly loaded (no network errors).
Ensuring that there are no build errors during the deployment process.
Could you please provide any insights or suggestions on what might be causing this issue or any additional steps I could take to resolve it? I am wondering if there are specific configurations or settings for Vite and React applications that I might be missing for a successful deployment on Railway.
Thank you for your time and assistance.
3 Replies
10 months ago
That seems like something specific to Vercel?
Blank screen likely means a 0 byte response.
Don't think there are any resources to load from a 0 byte response haha.
That's good!
Seems to me like you are running a development server, Railway differs quite substantially from sites like Vercel or Netlify where as Railway for the most part will not run a web server for you, Railway only runs your code or what you tell it to when it comes to Node apps, if you give Railway a repository for a Node app (in this case Vite) by default the start script will be ran, the start script for a Vite app is a development server, so that is what is ran, and that's not ideal for many reasons.
When deploying the majority of frontend sites to Railway you need to have it setup in such a way that a production ready web server serves the built site, there are many good ways to do this but my recommended way is Caddy with nixpacks.
Here is an example Vite + React + Caddy repo -
https://github.com/brody192/vite-react-template
I've tried to make it as simple as possible, All you should need to do is copy the Caddyfile and nixpacks.toml file from this repo into yours.
10 months ago
That seems like something specific to Vercel?
Blank screen likely means a 0 byte response.
Don't think there are any resources to load from a 0 byte response haha.
That's good!
Seems to me like you are running a development server, Railway differs quite substantially from sites like Vercel or Netlify where as Railway for the most part will not run a web server for you, Railway only runs your code or what you tell it to when it comes to Node apps, if you give Railway a repository for a Node app (in this case Vite) by default the start script will be ran, the start script for a Vite app is a development server, so that is what is ran, and that's not ideal for many reasons.
When deploying the majority of frontend sites to Railway you need to have it setup in such a way that a production ready web server serves the built site, there are many good ways to do this but my recommended way is Caddy with nixpacks.
Here is an example Vite + React + Caddy repo -
https://github.com/brody192/vite-react-template
I've tried to make it as simple as possible, All you should need to do is copy the Caddyfile and nixpacks.toml file from this repo into yours.
Thank you so much for your help!
I followed your advice and used the Caddyfile and nixpacks.toml from your example Vite + React + Caddy repo. I'm happy to report that your method worked perfectly, and my project is now running smoothly on Railway.
I really appreciate your assistance. Thanks again!
Before you responded, while researching online, I found another potential solution to my problem, which involves using the "serve" dependency. Before I make any changes, I wanted to ask for your recommendation. Would you suggest using "serve" or sticking with Caddy? Any guidance you can provide would be greatly appreciated.
10 months ago
I actually used to recommend serve before I put together the Caddy based solution, so serve definitely does work, and will work far better than a development server ever could, but it's still a Javascript based solution so its throughput, memory usage and configurability leave a lot to be desired, Caddy is a trusted production-ready web server and can easily be configured in endless ways!
