Deploying a weather app to Render
— Tuesday, 30 January 2024
When I've deployed full stack apps before I've used Heroku and found the developer experience quite good. I've also used Google's Firestore hosting. Seeing as Heroku have axed the free/hobby tier I decided to look at what else is out there and decided to give Render a go.
The weather app I've built uses Vite for the front end and a Node server with Express for the back end. You can read how it was build here.
Getting started with Render
The first step is to ensure the app is pushed to a repository on Github. My set up has both client and server sides in the same repo but it is possible to deploy each separately. Render lets you select the repo and the branch that you wish to deploy from.
There are various commands to enter in Render once you've connected your repo. I set the root directory as ./server and added a script command in the package.json file npm run build that installs the necessary npm packages and accesses the client folder to build the Vite app.
This
creates the /dist folder with the Vite index.html file and assets.
Render asks for the start command - npm run start - which starts the server running.
While my app isn't using a database there are keys that are stored as environment variables and Render has a section to enter these as key value pairs.
Once the commands and values are entered it's as simple as clicking on deploy to deploy the web app.
Cards on the table - it took me quite a few attempts to get it right. I encountered failed builds, deployments that seemed to have gone live but threw an error when trying to view the site. Viewing the logs Render provides was useful in trying to debug what was happening.
What's nice is that once you push changes to the main branch it is automatically deployed.
It's working!..or not...
When deployed, the app ran as expected on Chrome on my Mac browser but when I tested it on iOS Chrome I couldn’t get any results when submitting a location. Initially I thought it might be an issue with the form submission. I tried adding a button to submit the form but this had no affect.
My next debugging attempt was to test the site in a different browser on my mac - I tried Safari. Same result -
no weather results. Opening dev tools shed a bit more light on the issue - I spotted a
console error: Fetch API cannot load due to access control checks.
After a bit of digging I realised that the POST request to the server was using the local server url http://localhost:8800 which worked perfectly locally (and Chrome on the Mac seemed to forgive this on the deployed app) but Safari (and iOS browsers) refused to fetch data.
I managed to fix this by creating a env.local file - which would store the local url as an environment variable and load it locally and then within Render's environment variable section I was able to update its value with the live url.
Bingo. It worked. You can view the weather app here and the Github repo here.
Learnings
Definitely a valuable learning experience, even though it was frustrating at times!
I will explore further the use of environment variables for local and production use and try to integrate them more in future projects.