This document shows steps to configure cloud hosting for server-side web services. We will use Render .

Preliminaries

You must have these installed already:

  1. Node.js, a server-side JavaScript network application framework.

  2. Git, a version control system.

  3. PostgreSQL, a database server.

Initial project setup

  1. Open the command-line (Git Bash or Terminal).

  2. Let’s create a new project

    express --no-view Node6-Render
  3. Go into the project folder you created. After this step, assume you are in this folder.

    cd Node6-Render
  4. From the command line, install dependencies listed in package.json. This command may take a while to run.

    npm install

Database setup

  1. Install Node.js bindings to PostgreSQL .

    npm install pg --save
  2. We will need to define DATABASE_URL into .env to access the database.

    # Windows users only (replace password with the database password you created during installation)
    echo "DATABASE_URL='postgres://postgres:password@localhost/postgres'" > .env
    # Mac users
    echo "DATABASE_URL='postgres://localhost'" > .env
  3. To read the .env file into process.env, install dotenv:

    npm install dotenv --save

In-class exercises

Copy&Paste necessary files to Node6-Render

  1. Forms (Node3-Forms)

    madlibs.html, madlibs.js

  2. Database (Node4-Postgres)

    cars.html, cars.js, cars.txt

    You will need to recreate tables and insert data to Render remote database server.

  3. Authenticate (Node5-Authentication)

    app.js, users.js, index.html, login.html, profile.html, signup.html, login.js, signup.js, showPassword.js, login.css, style.css

    Install necessary packages: express-session, bcryptjs, passport, passport-local, express-flash

  4. Update index.js properly. Note that you will need to add for madlibs and cars exercises

npm start
  1. Go to http://localhost:3000/

  2. Go to http://localhost:3000/madlibs

  3. Go to http://localhost:3000/cars

  4. Test all your exercises If not working, do not move on until you fix it.

Setup PRIVATE github Repository

Refer to Assignment0 instruction, if you don’t remember how to.

  1. Create a repository for this project from github page. It must be PRIVATE repository since we will use this for the assignment and exam.

    Name the repository properly since this name will be used for Cloud hosting server name later. I recommend using your LASTNAME or unique_name.

  2. You MUST be INSIDE /Node6-Render Directory. Run the following git command.

    git init
    echo "node_modules" >> .gitignore
    echo .env >> .gitignore
    echo package-lock.json >> .gitignore
    echo .DS_Store >> .gitignore     #only for Mac users
    git status
    git add .
    git commit -m "Initial commit"

    Note that you MUST copy and paste your own SSH link. If you don’t know where to find it, refert to assignment0 or ask!

    git remote add render git@github.com:yourGithubID/RepositoryName.git
    git push render main    # it could be: git push render master
  3. Check your github repository to see if everything is pushed properly

Setup Render

Render is one of many modern web hosting services, and it uses git for deployment.

  1. Sign up to create your free account on Render.

  2. Create Web Service from Render

    Create Web Service from Render
  3. Connect to github repository from Render

    Connect to github repository from Render
  4. Create Postgres

    Create Postgres
  5. Get environment variable: DATABASE_URL

    Get environment variable: DATABASE_URL
  6. Set environment variable: DATABASE_URL

    Set environment variable: DATABASE_URL
  7. psql command to access remote database

    psql command to access remote database

Database on Remote Server

Last step is to replicate database on Render

You will need to recreate tables and insert data to Render remote database server. For example for the authentication,

psql command here that copied from Render site (last screen shot)
CREATE TABLE users ("id" serial primary key, username text, password text, fullname text, prefer text);

INSERT INTO users (username,password,fullname,prefer) VALUES('admin','$2a$10$tXMKF036p0ZYIxF/cJEHauw/TFrcho4DXy41Kt12D3Lbnzr221hmK','Marshall Mathers','Eminem');

create table cars (equipID serial PRIMARY KEY, maker CHAR(10), model CHAR(20), year INT );

\COPY cars FROM 'cars.txt' WITH (FORMAT csv);

\q

Note that we have two databases; one on your laptop (local) and one on Render (remote)

Assignment#4

Submit your URL to Black Board. You ONLY need to submit BASE URL

Here are the links that I am going to test (replace my URL to your URL):