Question
Deploying a React App to a Web Service
- Posted on May 3, 2024
- App Platform
Asked by bluefirepatrick
I realize that Static Sites are useful/usual for deploying React apps and I was able to get that working. But I want to manage API secrets that the React app needs and my first thought was to use a Web Service so that I could use run-time env vars for this purpose. However I am having difficulty finding a run command for the App (using vite) that will play nice with the Web Service. I eventually tried
“web”: “npm start”, “start”: “vite --port 8080 --host”
but while the build and deploy phases succeeded the site is unreachable. If anyone knows of a good run command that I should use then thanks in advance for any guidance there. If only a Static Site should be used then any ideas for API secret management would also be welcomed.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and SMBs
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.
Hey there,
React apps (including Vite-based ones) are meant to be built at deploy time, so using a Web Service just to pass runtime secrets won’t work as expected, the secrets won’t be available in the frontend bundle.
If you just need to manage API secrets, best to keep the frontend as a Static Site, and proxy your API requests to a separate backend Web Service where you can safely store and use secrets (like a small Node/Express service).
That way, your frontend never exposes secrets, and you keep things clean and secure.
Hope that helps clarify the setup.
- Bobby