Creation Of The Hammurabi Game Part 4 - How To Create A Hello World Node.js Frontend In A Docker File

[achimmertens]

Hello freaks,

I want to create a game, called "Hammurabi", that bases on Hive content. At the moment this game is just a small bunch of java code, that runs in a docker container. It is already connected to an elasticsearch database

In this documentation I want to show, how I have set up a "Hello World" node.js frontend server for this game. It enables us to see a webpage.

Preparation

In my case I want to install node.js on my raspberry pi. There I allready have installed npm (node package manager) (sudo apt install nodejs). For details see here.
I have created a new folder structure and pushed it (with force) to github:
("frontend" is at the beginning empty)

Install node.js

Go into the frontend folder.
Install node.js with the following commands:

npm init -y
npm install express

(This may take some minutes when you do it for the first time)

Create the file apps.js and fill it with:

const express = require('express')
const app = express()

app.get('/', (req, res) => res.send('Hello World! Achim was here!!! This is node.js. Nice to see you!'))
app.listen(3000, () => console.log('Server ready'))

You can test now, if it works. For this type in:

node app.js

You should see the following content in your browser. The URL is from your npm-location (in my case the raspberry server), followed by port 3000:

Create A Docker Image

Create a file named .dockerignore and fill it with "node_modules" (because this is a huge directory and we don't want to put it into the dockerfile. It will be created there automatecally):

We also don't want to have this directory in github. So we add "/frontend/node_modules" into .gitignore in the Hammurabi root directory:

Now let's create a Dockerfile with the following content:

FROM node:14
WORKDIR /usr/src/app
COPY package*.json app.js ./
RUN npm install
EXPOSE 3000
CMD ["node", "app.js"]

This file tells docker to:

• create an image, based on an basic linux, including node with version 14.
• the working directory in the image is /usr/src/app
• there the content is copied from the directory, in which the docker-creation-command is executed
• after that, npm install is executed
• Port 3000 is reached out as an interface to this docker container
• "node app.js" is started in this container

Let us create the docker image "hammurabinode" with the following command in the frontend folder:

docker build -t hammurabinode .

Now, let us run the image in a container:

docker run -d -p 3000:3000 --name node-app hammurabinode

And again, we should see a result like this:

See also: https://flaviocopes.com/docker-node-container-example/

Conclusion

Now we have two docker containers running: The one that contains the java code and logic (backend) and the frontend.
If your backend doesn't run, refer to my former post and/or start it like this:

C:\Users\User\git\Hammurabi\backend\target>scp *.jar pi@raspi:~/git/Hammurabi/backend/Docker
docker build --tag ham01.img .
docker run -d -p8080:8080 --name hamback ham01.img

The backend is listening for api requests:

In the next step we want to connect our frontend with the backend. So stay tuned.

Achim Mertens

Comments

[joebolite97]

How many Js framework is out there and do they serve the same purpose??

[poshtoken]

_{The rewards earned on this comment will go directly to the people sharing the post on Twitter as long as they are registered with @poshtoken. Sign up at https://hiveposh.com.}

[pixresteemer]

Bang, I did it again... I just rehived your post!Week 114 of my contest just started...you can now check the winners of the previous week!₄

[hivebuzz]

Congratulations @achimmertens! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s):

You distributed more than 48000 upvotes. Your next target is to reach 49000 upvotes.

_{You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP}

To support your work, I also upvoted your post!

Support the HiveBuzz project. Vote for our proposal!

[diyhub]

Thank you for sharing this amazing post on HIVE!

• Your content got selected by our fellow curator @priyanarc & you just received a little thank you via an upvote from our non-profit curation initiative!

• You will be featured in one of our recurring curation compilations and on our pinterest boards! Both are aiming to offer you a stage to widen your audience within and outside of the DIY scene of hive.

Join the official DIYHub community on HIVE and show us more of your amazing work and feel free to connect with us and other DIYers via our discord server: https://discord.gg/mY5uCfQ !

If you want to support our goal to motivate other DIY/art/music/homesteading/... creators just delegate to us and earn 100% of your curation rewards!

Stay creative & hive on!