Premade.io: Learning Javascript Stacks and Finding Node.js Servers
My journey in learning and deploying an isomorphic app with Node.js, Express, React / Redux, and MongoDB.
This is the third project update on my journey developing Premade.io and taking the One Side Project challenge. You can find my previous posts here.
March was a month of trials and errors buried in all the npm installs, Javascript libraries, and Node.js servers.
Being a web designer for quite a long time, I always wanted to learn more about coding, but I also always had good developers to work with. I was deeply spoiled in that sense because I can easily get out of nasty bugs and server errors and find someone else to help solve it. Turns out that’s not the best way to learn programming. Though I learned how to write a for loop in a handful of languages, I never really understood how things work on the server end and struggled to make any website with a backend.
Then I came across Parse. It was brilliant. Backend as a service. I can see my database on parse.com in an Excel layout, talk to the database using Javascript APIs, and turn any static webpage into a dynamic one. I was so excited about this technology and even wrote a series of tutorials on Tuts+ in the hope of tutoring all my fellow designers into Parse developers.
Of course, this dream didn’t last long. On January 28th, Parse announced that they are moving on. And I realized that I can’t rely on backend as a service forever. It was time to step up my game and really learn a technology stack.
I made an ambitious plan to decide on a tech stack in the first week of March and then re-write premade.io in the rest of the month.
That didn’t end well.
Week 1
The first week was great. I quickly finished the MEAN (MongoDB, Express, Angular, and Node.js) stack classes on CodeSchool.
And because we use React at Graphiq, I wanted to continue using React for my side projects as well so I can focus my energy. Then, I found this amazing tutorial at PluralSight titled Building a Full-Stack App with React and Express. Quickly went through that as well, fell in love with the idea of an isomorphic app, and was pretty confident about the MERN (MongoDB, Express, React, and Node.js) stack.
Week 2
Going into week 2, I had high hopes. I wanted to find a free server that doesn’t sleep and also maybe a react-express-parse isomorphic template project that I can start with.
Both didn’t go well.
For the node server part, I first tried Google Cloud.
After reading all the tutorials and learning its command line tool, I realized its Node server is not actually free when I was charged for $20+. Then I tried out OpenShift. It was good for a while. However, when the project became more complex, the npm install on the server side just kept failing. And for reasons unknown, the empty MongoDB took 500M out of the 1GB free storage. With very limited server knowledge, I just went in hopeless Stack Overflow searched and didn’t get much out of them.
And for the starter template I tried to find — again it was all trials and errors. I kept switching from one template to another, couldn’t decide on gulp vs. webpack, and also at one point recreated the whole tutorial project from the PluralSight tutorial.
Week 3
The trial, error, Stack Overflow, walk-around, skip, give up circle kept going. OpenShift was causing me a ton of issues because it’s not really compatible with many templates I found, and I don’t have real control over the server.
I felt like I was trapped in the dark corner of this infinite loop.
And that’s when I realized with such little backend and server knowledge, going into all the cutting edge new Javascript libraries is probably a recipe for disaster.
Week 4
Time flew and it was towards the end of the month. I was still struggling with the stack, the server, and the template combo. Then I came across this react-webpack-node repo by Ken Ding.
It has everything that I need — isomorphic, React + Flux, a built user system so I don’t have to worry too much about the security issues, and the best part — it has a button that says “Deploy to Heroku.”
I avoided Heroku at the beginning because its free tier has a mandatory 6 hours sleeping time every day and I wanted to find a better free plan somewhere else. But at this point, it doesn’t matter.
So I tried the button (had to switch from mongohq to mongolab because mongohq wasn’t free), and it worked.
Week 5
It almost felt surreal for a while, but in week 5 I have this sample project running: https://floating-tundra-98961.herokuapp.com/
Still hadn’t converted the premade.io project to it and there was an npm install error on my local, but I tried to create some Classes and APIs and it worked like magic.
Time Spent
No time for marketing this month. I did work more diligently in March than February. It was all long nights trying to make things work and gaps of frustrations. Hopefully next month it will be better.
Next Steps
At this point, I am more realistic. I just hope I can re-build premade.io using this new stack in April.
Resources
There are the list of things I found useful along the way and the stack I ended up using:
- The MEAN Stack at CodeSchool, a great starting point to get familiar with all those libraries.
- Building a Full-Stack App with React and Express at PluralSight, a great tutorial if you learn by following examples.
- Heroku, a great free / cheap server space with a lots of community love, super newbie-friendly.
- MongoLab, the free MongoDB-as-a-Service integrated into Heroku.
- react-webpack-node repo on Github, the project template I ended up using, lots of great features and really easy to deploy.
As always, give this article a 💚 recommend if you found it useful, and follow One Side Project Challenge for my future updates and other inspiring side projects.
