As the world is locked down due to the COVID-19 Corona Virus, we are quarantined at home. We miss the company of our families and friends, so online games are the only option to play together. We are going to create an online multiplayer game that can be used for any tabletop gameplay.
The framework for this game came from the great tutorial at How to Build a Multiplayer Card Game with Phaser 3, Express, and Socket.IO
Install a web server for development
I have installed XAMPP from https://www.apachefriends.org/index.html
The home directory where the index.html should be is at C:\xampp\htdocs
Install the latest version of Node.js from https://nodejs.org/en/download/
Install Phaser 3 based on http://phaser.io/download/stable as of writing with
npm install email@example.com
The getting started guide on Phaser 3 is at Getting Started with Phaser 3
A great game tutorial is at Making your first Phaser 3 game
The multiplayer online game development
To test the client on your workstation, start the Node.js client from a terminal window to display the web page for the players.
cd client npm install npm start
The default browser opens with the http://localhost:8080/ address.
To test the server on your workstation start the multiplayer server in another terminal window
cd into the root directory above the client. The next command will ask questions and create a new package.json file
cd server npm init
Install Express, Socket.IO, and Nodemon
npm install --save express socket.io nodemon
Start the server
npm run start or node server.js
Build the application
Stop the client development server, otherwise you will get the error message
Error: EPERM: operation not permitted, lstat ‘…\client\dist\src\assets’
Build the client application
cd client npm update npm run build
Deploy the application on the workstation
Copy the assets into the dist directory
cd client mkdir -p dist/src/assets cp src/assets/* dist/src/assets
Copy the contents of the client\dist directory to the webserver
mkdir -p C:/xampp/htdocs/rummy cp -r dist/* C:/xampp/htdocs/rummy
Start the Express server
To provide the Socket.IO functionality in the root of the game development directory execute
cd server npm run start
Test the multiplayer application in the local network
Use your workstation as the test server and connect to it from another computer.
Set the Socket.IO server URL
To be able to connect to the same Express server from the workstation and from another computer on the same network change the Socket.IO URL in the client/src/scenes/game.js file.
this.socket = io('http://MY_COMPUTER_IP:3000');
Expose the Express server on your workstation to the local network
Open port 3000 in the Windows firewall.
Start the webserver
Open the XAMPP Control Panel and click the Apache Start button
Open the website
In a web browser navigate to http://MY_COMPUTER_IP/rummy/
Build the Docker image
Based on the great post at Dockerizing a Node.js web app
Create a Dockerfile in the server directory
FROM node:12 # Create app directory WORKDIR /usr/src/app # Install app dependencies # The wildcard will copy both the package.json AND package-lock.json files (npm@5+) COPY package*.json ./ RUN npm install # If you are building your code for production # RUN npm ci --only=production # Copy all files COPY . . # The server listens on port 3000 by default EXPOSE 3000 CMD [ "node", "server.js" ]
Build the server Docker image
cd server docker build -t robbers-rummy-server .
Create a Dockerfile in the client directory. We will use a two-stage build process to make the final image as lean as possible. We build the application in a Node.js container and run it in an Nginx container.
FROM node:12 as builder # Create app directory WORKDIR /usr/src/app # Install app dependencies # A wildcard is used to ensure both package.json AND package-lock.json are copied # where available (npm@5+) COPY package*.json ./ RUN npm install # If you are building your code for production # RUN npm ci --only=production # Bundle app source COPY . . RUN npm update RUN npm run build # Create asset directory RUN mkdir -p dist/src/assets # Copy the images to the dist folder COPY src/assets/* dist/src/assets/ FROM nginx:alpine as runner WORKDIR /usr/share/nginx/html COPY --from=builder usr/src/app/dist/* ./ # Copy the images from the source RUN mkdir -p src/assets COPY --from=builder /usr/src/app/src/assets/* src/assets/ EXPOSE 80
Build the client Docker image
cd client docker build -t robbers-rummy .
Launch the Docker containers
Start the server container from any directory
docker run -p 3000:3000 -d robbers-rummy-server
Start the client website container from any directory
docker run -p 80:80 -d robbers-rummy
Stop the Docker conainers
Get the container IDs
Stop and remove the containers using the container IDs
docker stop MY_CONTAINER_ID
docker rm MY_CONTAINER_ID
Use Docker Compose
To launch the server and the client website together we will create a docker-compose.yml file in the root of the application
version: '3' services: api: image: robbers-rummy-server build: . networks: - backend ports: - "3000:3000" web-cli: image: robbers-rummy networks: - backend ports: - "80:80" networks: backend: driver: bridge
Start the containers with Docker Compose from the application root directory
docker-compose up -d
To stop the containers launched with Docker Compose from the application root directory
Host the application in AWS
We will host the static website in AWS S3, and the server Docker container in an AWS ECS Fargate cluster.