Building a Simple NodeJS server & Deploying with Render

What does a server need to do? Why?

Serve data to clients!

How does this process work?

Suppose someone types into their browser. Their browser (the client), then sends a ‘request’ to the server. The server handles that ‘request’ and returns data in the form of a ‘response’ to the client. That response ends up being html with links for static resources such as css, javascript, and assets (i.e. images), to be presented to the client. In other words, the webpage!

Flow diagram of there client server model

Project Summary

Build a web app enabling visitors to subscribe to a Mailchimp newsletter.
TOOLS: NodeJS, npm, Express, and the Mailchimp api.

Deployed Web App:

Repository Template (no API keys):

My Process

  1. Setup Directory
  2. Setup Server basics: listen on a port and handle GET requests from the root route
  3. Build and style webpages with HTML & CSS
  4. Handle POST requests for Newsletter Signups: making a GET request to Mailchimp database server
  5. Deploy using Render

Let's Build!

Setup Directory

(assumes node.js and npm are installed)

  1. Create directory (mkdir Newsletter-Signup)
  2. Initialize NPM (npm init)
  3. Create files: app.js, signup.html, success.html, failure.html (touch app.js success.html failure.html)
  4. Create a Public directory within Newsletter-Signup (this houses any static resources we want to serve to the client, like css files and images. These don’t require any preparation from the server. So instead of the kitchen preparing each meal per order (like the html pages being prepared per request), this is a buffet, food ready for the client to put on their plate.
  5. Create ‘images’ and ‘styles’ directories within ‘public’Create styles.css within public/styles
Screenshot of the directory setup
Directory file structure

Build Basic Server to handle GET requests

First, import and setup the ‘express’ package. It helps make our code faster to write and easier to read.

“Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.”
Screenshot of code used to setup the Express module, with annotations
Packages being setup: Express and Node’s internal package ‘https’

Setup the server to listen on our localhost port 3000 for development

app.listen(3000, console.log("Server running on PORT 3000")

Handle GET requests at the directory root route (app.js)

app.get("/", function(req, res) {  
res.sendFile(__dirname + "/signup.html")})

Build and Style Webpages with HTML and CSS

  1. Use html boilerplates to create the basic document markup for each page.
  2. Copy and paste the html source code from a Bootstrap form example. Using a Bootstrap example speed’s up our styling (CSS writing), so we can focus on building the server. I used Bootstrap’s simple login form, then edited the html elements to match my needs.
  3. Make sure to add a link to Bootstrap’s CDN to the head of each html page.Copy and paste any custom CSS for this bootstrap example into our own styles.css file (path should be: public > styles > styles.css)
  4. Copy and paste any custom CSS for this bootstrap example into our own styles.css file (path should be: public > styles > styles.css)
A screenshot of the Bootstrap example used and the source code, annotated with edits.
Bootstrap example + its source code, annotated for our needs.

Handle POST requests from the SignUp form

  1. Create variables for the form input data (thanks to Express middleware we already set up).
  2. Turn form data into a JSON string, exactly how Mailchimp’s API wants it based on their documentation. We already set up the Express middleware for JSON data with app.use(express.json()).
  3. Make a POST request to the MailchimpAPI with options formatted to their specification. This is all written within the POST request to our server.
    — Create a const for the POST request, using Node’s internal https package. Make sure the module is required at the top of app.js file.
    — Based on the response status, serve our client either the success page or failure page.
    — Write the form data to the POST request with request.write(), followed by request.end().

Below is the code for our server handling POST requests at the root route, and making its own request to Mailchimp before sending a response.

Screenshot of the code used to make a post request to Mailchimp's server

Deploy using takes the place Heroku filled for a while, offering free hosting for small hobby web apps, and providing paid services when you need to scale. As described on Render’s website:

“Render is a unified cloud to build and run all your apps and websites with free TLS certificates, a global CDN, DDoS protection, private networks, and auto deploys from Git.” —

Plus, Render is setup with NodeJS.

Screenshot of homepage
  1. Create a free account on
  2. Create a new ‘Web Service’ project on Render.
  3. If not done so already, push your directory to GitHub.
  4. Connect Render to GitHub and select your Newsletter-Signup repository.
  5. Settings for your Web Service:
    • Build command: npm
    • Start command: node app.js
screenshot of the settings used on for a node JS web service
Settings for Render using npm

Your web service should be deployed shortly!