Skip to main content

​
Prerequisites

Before you begin, ensure you have the following installed on your system:
  • Node.js: Version 14.0.0 or higher
  • npm: Comes bundled with Node.js (or use yarn/pnpm as alternatives)
  • Git: For cloning the repository
The project uses ES modules ("type": "module" in package.json), so make sure your Node.js version supports this feature.

​
Installation

1

Clone the repository

Clone the Mokepon game repository from GitHub:
git clone https://github.com/jdrodriguez2707/mokepon-game.git
cd mokepon-game
2

Install dependencies

Install all required npm packages:
npm install
This will install the following production dependencies:
  • express (^4.21.2) - Web framework for Node.js
  • cors (^2.8.5) - Enable Cross-Origin Resource Sharing
  • compression (^1.8.0) - Response compression middleware
  • helmet (^8.1.0) - Security headers middleware
And development dependencies:
  • dotenv (^16.4.7) - Environment variable management
3

Start the development server

Run the server locally:
npm start
The server will start on port 3000 by default.
4

Open the game

Navigate to the game in your browser:
http://localhost:3000
You should see the Mokepon character selection screen.

​
Environment Configuration

​
Development Mode

In development mode, the application loads environment variables from a .env file using dotenv: 
if (process.env.NODE_ENV !== "production") {
  const dotenv = await import("dotenv");
  dotenv.config();
}
Create a .env file in the root directory (optional for local development):
.env
PORT=3000
NODE_ENV=development

​
Environment Variables

VariableDescriptionDefaultRequired
PORTServer port number3000No
NODE_ENVEnvironment mode (development or production)developmentNo
In development mode, CORS is configured to allow all origins ("*"). This makes it easier to test the game from different devices on your local network.

​
Development vs Production

The application behaves differently based on the NODE_ENV environment variable:

​
Development Mode

  • Loads environment variables from .env file
  • CORS allows all origins ("*")
  • Full error stack traces are sent in API responses
  • Easier debugging and testing

​
Production Mode

  • Environment variables from hosting platform (Heroku)
  • CORS restricted to production domain: https://mokepon-ed1d40aff3a6.herokuapp.com
  • Error stack traces are hidden from API responses
  • Security headers enforced via Helmet
  • Response compression enabled

​
Available Scripts

The following npm scripts are defined in package.json: 
{
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}
  • npm start: Starts the Express server using index.js
  • npm test: Placeholder for future test implementation
npm start

​
Troubleshooting

​
Port Already in Use

If port 3000 is already in use, you can specify a different port: 
PORT=8080 npm start
Or add it to your .env file: 
PORT=8080

​
Module Import Errors

If you encounter ES module import errors, ensure:
  1. You’re using Node.js 14.0.0 or higher
  2. The package.json contains "type": "module"
  3. All imports use the .js extension

​
Canvas Rendering Issues

If the game map doesn’t render properly:
  1. Check browser console for errors
  2. Ensure the map image exists at /public/assets/images/mokemap.png
  3. Clear your browser cache and reload
Do not commit your .env file to version control. It’s already included in .gitignore to prevent accidental commits of sensitive data.

​
Next Steps

Now that you have the development environment set up:

Build docs developers (and LLMs) love

Get started for freeTalk to us