Hello Hivers.
This is the fourth post in this series and as usual the links for the previous posts are given at the end of the post. Check out my introduction post for a better understanding of what I am trying to do here.
The Checklist
- Set up the backend with NodeJs and Express ✔
- Set up the database with MongoDB Atlas ✔
- Set up the frontend with React and Reactstrap ✔
- Implement Redux for state management ✔
- Connect the backend and frontend ✔
- Deploy the website online ✔ ★
- Backend auth with JWT
- React and Redux auth state ( I don't even know what that is as of right now)
- Set up registration and login features
It feels so good to be able to see my goals being completed one by one. These posts that I am doing creates a social pressure for me to keep up and work towards finishing this project. If I had not done this, I probably might have given up by this point.
So, anyways, lets get back to the technical aspects of the projects.
DevOps Is Hard
I am just going to come forward and say this, DevOps is friggin hard! Deploying this website was supposed to be a relatively small task but it took me almost 3 hours!
Even after I followed the instructions in the video to the point, I kept running into one issue or another.
Here's how it went:
I am deploying the website using Heroku. Now there are 2 builds to create, the frontend and the backend.
To do this, I used a postbuild script. I added the following line of code to the package.json file of my server.
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
What this script does is, it first installs the backend files and dependencies and then builds out the frontend when the code is pushed to the heroku container. This means I am not creating a production build on my local machine.
Sounds pretty easy right? Wrong!
During this entire process, I ran into so many issues. One of which was due to the OS I am working on.
Please don't judge me but I am indeed working on windows and not on linux. I know windows is for the normies and I usually code in my virtual machine with ubuntu but this project was done in windows because my ubuntu partition is almost full and this project could get very large due to the good old "node_modules" folder.
Source: dev.to
So anyways, the problem I ran into is that my environment variable for the Heroku CLI was not properly set up because apparently windows only supports an environment variable string of 2057 characters(I'm not sure if thats the exact number but it was close to 2000) which is absurd as to why there is even a limit.
I did not know that little detail before, so I tried reinstalling the heroku CLI 3 times and still my cmd couldn't recognize heroku commands. After googling the issue I finally found the fix.
In trying to fix my PATH variable, I ended up resetting it which meant that now GIT, NPM or any other package that I had previously installed failed to run.
Fortunately enough I was able to fix this by using the echo %PATH% command in my cmd and copying the string to the environment variable.
After running the following commands, my website was finally up and running:
$ heroku git:clone -a YOUR_HEROKU_REPO_NAME
$ cd stormy-meadow-50002
$ git add .
$ git commit -am "make it better"
$ git push heroku master
The website can be accessed here. Please check it out and let me know what you think about it.
You can also find all the code in my github repository here.
Conclusion
I can't express how happy this makes me to reach this point. There are still some features to be added to the website but I am proud to say that the site is functional at this point.
Now that I can do this, I can start focusing on real projects. I had a lot ideas when steem was at its prime but couldn't go through with any of them because I lacked the technical know how in order to turn an idea into something tangible.
This is the start of a new chapter with a lot of stuff to achieve and I am very excited for it.