This is a clone of the Chrome Dino Game
built as a web application on React
. It is deployed on AWS Elastic Beanstalk
using Docker
and Docker Compose, with a complete CI/CD workflow using GitHub Actions
.
React
Nodejs
Github Actions
Docker
Docker Compose
AWS ElasticBeanstalk
-
Create a new React project using commands:
npx create-react-app (app-name)
cd (app-name)
-
Install necessary dependencies:
npm install styled-components
npm install @react-spring/web
-
My Project Structure overview on VS Code:
- Game Components
Create Game.js
file to manage the game state and render other logical components like, Obstacle Spawning, Collision Detection.
Create Dino.js
to represent the dinosaur avatar and handle jumping over the said obstacles.
Create Obstacle.js
to represent obstacles and manage their movement.
Integrated the above components in App.js
- Testing
Run the application to test all game mechanics using:
npm start
Ensure the development server starts correctly and the game functions as expected on the local browser.
-
Run the command in an empty directory in VS Code to run a container of nodejs
docker run -it -v$(PWD:/app -p 3000:3003 node16.20.2 sh)
-
Go inside docker container using
cd app
-
Initialise a new react application using
npx create-react-app .
-
Once initialized, add all the components & files, of Dino Game clone from the earlier directory.
- Ensure react application is running correctly on the local browser
Hence, a basic react web application is successfully built inside the docker container.
- Exit from the docker container using command
exit
- Create a
Dockerfile
for production - Create a
docker-compose.yml
file, such that it can run the images from Dockerfile as a container on the main, Elastic Beanstalk server - Test the build on local machine using
docker-compose up --build
-
Create
.github/workflows
folder in your local repository & adddeploy-aws.yml
file, including the triggers, branches & actions -
Commit & Push the repo to GitHub as ‘Deploy React to AWS EB’
-
Once workflow is successfully executed & the custom, DinoGame Clone web application is deployed to AWS EB, check the domain from AWS EB console.
👩💻Icons credits: here