Deploying a simple NodeJS web app
This is a brief tutorial about deploying a small web app using Cloud9. It’s a super simple app with under 80 lines of code for both front and back end. For this tutorial I will focus on the deployment part so I won’t be discussing much of the actual code. For now, feel free to grab the code from my github. Let’s get started.
Download code at: https://github.com/nadyac/gifSearch.git
Here’s our index.html homepage displayed on the browser. It’s pretty minimal. There’s a header, an input box, a label, and a search button.
Here’s the index.html code with the form and submit function. The url for making calls to the Node server is on Line 28. For my app, the url is ‘https://minigiphy-nadyac.c9users.io:8081/gifs/’+input+ ‘.gif’. However, if you’re running this app locally, your base url would probably be ‘https://localhost/gifs/’.
On the backend side, here’s the node server. Note that I used the port number 8081 instead of the standard 8080. The reason for this is that my index.html page is already occupying port 8080. Luckily, Cloud9 offers some additional ports (like 8081) so that you can run different parts of your app simultaneously.
Another thing to note is the IP address. If you’re running the app locally, your default server ip address would be ‘127.0.0.1’, but on Cloud9, the default localhost ip address is ‘0.0.0.0’. Getting the port number and ip address right is important; otherwise your server can’t listen for requests.
Finally, let’s have a look at the Cloud9 workspace. It looks just like an IDE so it should feel familiar to most developers. It comes with many built-in services and features, including a multi-window console, NodeJS, Apache server, Python, pip, npm, and many more. This makes deployment fast and easy because there’s little configuration or installation overhead (yay!). For the project directories, you can literally drag and drop folders and files into your workspace and Cloud9 and they will show up on the left panel just like in many IDEs.
Finally, to run the app, you select the index.html so that it becomes the active file. Click the Run button at the top of the workspace. You will see the console (if you have it open) announce that the app has been started and provide you the link to it. Then select the gifServer.js file and run it. Same thing will happen. Now you can go to the index.html link provided to you by C9 and you should be able to see and use your fully functional app!
Note: the app is intentionally simple so the “search” feature retrieves gifs from a gifs folder in the project directory. It finds the requested gif by strict string matching so the input should be the name of the gif you want to retrieve. Of course, this could be expanded to be more robust, be an actual search engine based on keywords, etc. Have at it!