Notes on Node Express tutorial Blog API deployment attempts and eventual successful deployment on Cyclic.sh
Last updated on 22 March 2024
Note: This post is a details-post for the post: Learning web app development through free online tutorials – Organized Notes and Log, https://raviswdev.blogspot.com/2024/03/learning-web-app-development-through.html .
This post is based on a detailed note-cum-log I wrote as I was attempting to deploy the Node Express & MongoDB tutorial Blog API. I think it may be useful for others who are using the roadmap to full stack web development that I have provided.
I first focused on Heroku as the John Smilga tutorial covers Heroku deployment.
Heroku node.js app deployment guide: https://devcenter.heroku.com/articles/getting-started-with-nodejs?singlepage=true
John Smilga tutorial start heroku deployment: https://www.youtube.com/watch?v=rltfdjcXjmk&t=33350s
https://www.freecodecamp.org/news/how-to-deploy-your-site-using-express-and-heroku/
Heroku CLI command was not recognized. To fix ... Heroku is not recognized as an internal or external command solved, https://www.youtube.com/watch?v=unwINcJ859A, 1 min. 38 secs. That fixed it for me (adding heroku bin path to user a/c path variable).
git init (in project directory)
heroku create Blogapi
*** Got stuck here with message:
Creating ⬢ Blogapi... !
! To create an app, verify your account by adding payment information. Verify now at https://heroku.com/verify Learn
! more at https://devcenter.heroku.com/articles/account-verification
----------
Tried creating app on Heroku website ... same problem. They want credit card! I decided to suspend Heroku deployment efforts.
Digital Ocean, https://www.digitalocean.com/try/deploy-nodejs , also needs a credit card (see FAQ towards end of page).
I read and viewed up about Node Express deployment on Netlify.
Express on Netlify, https://docs.netlify.com/integrations/frameworks/express/
Deploy NodeJS App on Netlify for Free (Heroku Alternative) | NEW 2023 Tutorial, https://www.youtube.com/watch?v=8x0Dty5D6CA , around 4 mins.
It is clear that Netlify deployment is somewhat complex. I decided to explore further alternatives.
Top free Heroku alternatives for every case!!!! , https://www.youtube.com/watch?v=EyfSdyFkYRg , 6 min. 50 secs.
...
Clicked on Start button in "Free Forever" section of https://www.cyclic.sh/pricing . It guided me through some steps involving Github authorization (twice) and I could deploy a simple Node "starter-express-api" within a few minutes of having clicked the Start button!
The app is super-simple just responding with Yo! to all requests. See code at https://github.com/cyclic-software/starter-express-api/blob/main/index.js
App got hosted at: https://shy-tan-chameleon-gear.cyclic.app (later I had to delete the app as only one app is supported in free plan). Tested it from my browser and it works!
Explored the Dashboard and it seems to be good enough for me!
DIY section on cyclic docs explains how to "link your own repository from github".
A good article on the same: Deploy your Nodejs + Auth0 REST API to Cyclic.sh under 4 minutes.
...
Created BlogTutAPI public repository in github.
Commands I executed (after deleting earlier .git directory) to create local git repository for BlogAPI project and push its contents to above github repo:
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/ravisiyer/BlogTutAPI.git
git push -u origin main
My above command list matches what this article states, Pushing your first project to github.
The BlogTutAPI repo got setup correctly on Github.
...
As the free plan on cyclic.sh supports only one app, I had to delete the previous 'starter' app. Settings icon (Dashboard) -> Advanced has Delete App option on the left menu.
After app was deleted, the main window showed "Deploy your first app". Chose "Link your own" option (instead of "Starter Templates").
In next window, refreshed Github repositories and chose BlogTutAPI.
In next window titled "Connect Cyclic to BlogTutAPI", chose "Connect Cyclic".
Chose Approve in Github authorization window.
I got an error that I am using nodemon in package.json start script. I changed package.json in VSCode project to use 'node app.js' as the start script. Used following commands to push changes to github repo:
git commit -m "changed nodemon to node in package.json start script"
git push
----
Next tried "Connect Cyclic" again. This time the app got deployed successfully! I got a message about environment variable setting (MONGO_URI) and "Check out your app live at https://crazy-sheath-dress-crab.cyclic.app".
At environment variables console, "MONGO_URI" entry with blank value had already been added. Added the value from .env file to cyclic env. var.
The I got the following message:
MongoDB connections work a little differently with serverless.
To avoid bugs, connections should be established before a server's listen method is called. To make sure this happens every time, call the listen method in the connect callback.
----
App.js in BlogAPI project does call connectDB before listen. So I closed the message window and then clicked on Save to save the env. var.
Browsed to https://crazy-sheath-dress-crab.cyclic.app/ . It showed the old frontend app! [I need to put in a new index page there which simply states it is a blog tutorial API site. I may rename the old frontend app page but still retain it so that I can access it by specifying the new name.]
https://crazy-sheath-dress-crab.cyclic.app/api/posts gave what seems to be expected JSON output!
...
React app on PC was then to be modified to use an environment variable for API URL. [Environment variable for cyclic API URL is not necessary but I think that would be right thing to do. This way if the backend API URL changes, the (to be done) Netlify deployed React app will need only env. variable change to work with changed backend API.]
I checked that netlify does allow setting of env. variables for my previously hosted react apps.
Environment variable set up for Create React App projects (like React blog tutorial app) is described in create react app documentation. It states that all environment variables are embedded in the build and so are not secret. So it is quite different from node express environment variables. Also, the name has to start with REACT_APP_.
https://stackoverflow.com/questions/49579028/adding-an-env-file-to-a-react-project gives procedure for non create react app projects where dotenv package is used additionally (like in node express case, if I recall correctly).
Added .env to React blog project and changed code to use API URL env. variable. Added .env entry in .gitignore (it already had env.local and some other related entries but not .env).
The React app. worked straight-away with this setting: REACT_APP_API_URL='http://localhost:4000/api/posts/' (after I had the node express app running on desktop PC).
Changed env file to have this entry: REACT_APP_API_URL='https://crazy-sheath-dress-crab.cyclic.app/api/posts' (and earlier entry commented out with # at beginning of line).
'npm start' has to be run again in React app to pick up env file change, it seems.
React app. worked right away with cyclic.sh hosted backend API server! I could see console.log entries in logs section of my cyclic.sh dashboard showing that I had made GET requests and the Express app. running on desktop did not show such console.log entries (after I changed React app to use cyclic.sh API URL). Then I stopped the desktop PC Node Express app. The React app. continued to function (getting list of blog posts).
Tested out CRUD ops. All worked! The cyclic.sh dashboard logs window showed the morgan log messages and it also provided additional info. about the CRUD APIs received and processed.
Comments
Post a Comment