Objective

• Implement a simple HTTP Server using ExpressJS

Overview

You will continue working on the Wordle game but factoring out the logic for selecting the random secret word to a remote HTTP server.

Step 1: Create an ExpressJS app

• In a separate folder from your Wordle app, create a new project for your ExpressJS server.

• Define a GET endpoint to return a random word each time you issue an HTTP request to that endpoint. Keep an array of 5-letter words in your server

• Return the HTTP response in a JSON format

  { secret: "....." }

  you may use a different field name (secret) that makes sense

Step 2: Modify the Wordle App

You may choose to modify either your VueJS or React version of your basic Wordle implementation. You may use the version without Firebase integration.

• Start your ExpressJS on a local development server

• Modify the handling of the "New Game" button to fetch the random word for the local server

• Use the axios library to initiate the HTTP get request:

  // Somewhere in your <script setup> (if you use VueJS)
  // Somewhere in your functional component (if your use React)
  type WordleResponse = {
      secret: string
  }
  
  // Inside the "New Game" button click handler
  axios.request({method: "GET", url: "http://localhost:9000/your_end_point_name"})
    .then((res:AxiosResponse) => res.data)
    .then((w: WordleResponse) => {
      console.log(`The secret word from server is ${w.secret}`)
    })

• Run your web app on another local development server and test both servers locally. Be sure to handle any potential CORS issue when accessing your ExpressJS server.

Step 3: Build Your Server Locally

1. Install typescript globaly (if you have not done it)

   npm install -g typescript

2. Transpile your TS server to JS

   tsc

   You should find a new JS file dist/name-of-your-file.js

Step 4: Deploy Your ExpressJS Server

Deploy your server to a public hosting provider of your choice. The new instructions on the css lecture notes show you how to deploy to Render

Preparing for deployment

Edit your .gitignore as follows:

• Delete dist (this directory should NOT be ignored by git)
• Insert node_modules (this directory should be ignored by git)

Be sure your the scripts section of your package.json has the following entry:

"scripts": {
  "build": "npm install",
  "serve": "node dist/bname-of-your-file.js"
}

Under your Render.com project settings, use these two scripts for:

• Build Command: npm run build
• Start Command: npm run serve

After deployment, use the URL of your deployed server in your Wordle app to fetch the secret word. Essentially replacing

axios.request({method: "GET", url: "http://localhost:9000/your_end_point_name"})

with

axios.request({method: "GET", url: "https://the-actual-url-of-deployed-server/your_end_point_name"})

Grading Rubrics

Grading Item	Point
ExpressJS endpoint with JSON response	4
Random 5-letter word in JSON response	3
Modify World App to connect to remote word server	4
Deployment of ExpressJS server to public host	4

Deliverable

Upload the following information to Bb

• The GitHub classroom URL of the modified Wordle
• The GitHub URL of your ExpressJS code
• The URL of the publicly hosted ExpressJS server