Frontend deployment
This guide covers Vite frontend application deployment using the Render platform. Follow the instructions carefully and perform the steps one by one.
Environment configuration
In the frontend folder, add a .env
environment variable file for the development environment. The .env
file should contain a VITE_BACKEND_URL
environment variable for the backendâs development environment URL:
VITE_BACKEND_URL=http://localhost:8080
Make sure that every fetch
function call has the environment variable as the URL prefix. For example:
fetch(`${import.meta.env.VITE_BACKEND_URL}/api/messages`).then(
(response) => {
// ...
}
);
Add a .env.production
environment variable file for the production environment. The .env.production
file should contain a VITE_BACKEND_URL
environment variable for your backendâs Rahti application URL (ends with ârahtiapp.fiâ). For example:
VITE_BACKEND_URL=https://nameofyourrahtiapp.2.rahtiapp.fi/
Finally, push the changes to GitHub.
Render static site deployment
Sign in to Render using your GitHub account and go through the sign up process. The information you provide in the sign up process doesnât matter.
Once signed in, on the Render dashboard, click the âNewâ button and choose âStatic Siteâ. Then, choose âPublic Git Repositoryâ tab, type in the URL of your GitHub repository and click the âConnectâ button. Come up with the name for the static site. Set the following settings for the static site:
- If the frontend application is not initialized in the repositoryâs root folder (this is the case if you donât have a separate repository for the frontend application), set âRoot Directoryâ as the frontend folderâs name
- Set âBuild Commandâ as
npm run build
- Set âPublish Directoryâ as
dist
- Open the âAdvancedâ section and set âAuto-Deployâ as âNoâ
Click the âDeploy Static Siteâ button to create the static site.
On the static siteâs page, click âRedirects/Rewritesâ from the navigation on the left. Set the âSourceâ as /*
, âDestinationâ as /index.html
and âActionâ as âRewriteâ. Finally, click the âSave Changesâ button. This configuration will make the frontend routing work.
Triggering deployment
Deployment can be triggered from the static siteâs page in the Render dashboard by clicking the âManual Deployâ button and choosing âDeploy latest commitâ.