This is a simple database application which integrates with Age of Empires 2 API and lists various entities available in the game like units, civilizations, structures and technologies.
Made with ❤️ by @apfirebolt
Please find me here
- Demonstrates use of Context API in React.
- Demonstrates use of beautiful Material UI React Components like cards, buttons, accordions and more.
- Contains use of updated React Router packages.
Simply install node modules for the React app and you're done at least for the development mode.
npm install
npm start
For production, build the frontend of the app.
npm run build
npm start
- Deployment scripts to be added through Docker, Heroku and Netlify.
- Search bar to be added for searching civilizations, units and more.
Heroku is probably the easiest of the methods available to make your app available to the public. It might not be the best method for production ready apps, but would be more than suffice for testing purpose.
So, the requirements then. You must have a Heroku account and certain free space available in case you're using free version.
- From your Heroku Web Dashboard (https://dashboard.heroku.com/apps) click on "New" to create a new app, give a name to the app which should be unique in Heroku universe.
- Navigate to the 'Deploy' tab and choose "Github".
- Create a repo on Github and push all your React app code in it.
- Just below the Deployment section, you'd find option to connect your app from Github to the current Heroku app. You can do so by simply searching for your app which must be on your Github account.
- Choose a branch to deploy, optionally you can also setup a pipeline which would automatically deploy if a given branch is modified on Github. Do not click on 'Deploy' yet, there is one thing still to do.
- We forget one important step, that is to add a build pack which would deploy React apps on Heroku. Heroku does have build packs for Python, Ruby but not something by default which could deploy your react app.
- Go to 'Settings' tab, choose build-packs and add this 'https://github.com/mars/create-react-app-buildpack'
- Go back to step 5 and click 'Deploy'.
- You'd see logs for your on-going build, in case it is a success you'd see the link of your app at the bottom once the build process is executed successfully.
- For instance, my app link is https://react-aoe2-app.herokuapp.com/technologies, that is it. Your app is live now on Heroku.
This app can also be deployed in production using Docker containers assisted through Nginx servers serving the build files.
- Setup your Docker and Nginx files within the project directory.
- Create a Docker image
- Spawn a container from the image created on port 80
sudo docker build . --tag=react-aoe2
sudo docker run -d -p 80:80 react-aoe2
Please find some of the screenshots of the application. Below is the screenshot of the Homepage.
Civilizations page, this page lists all the civilizations available in the game.
Structures page, this page lists all the structures available in the game.
Technologies page, this page lists all the technologies available in the game.
