Setup

Now that we know the more about the concepts, let's scaffold out the basics of our project

Let's Build!

Okay, I'm building this in Node.js with Typescript. I hope to get to building it in a few different frameworks and languages, but this is the starter, as it's a very flexible language and framework that still has constraints built in to keep things clean. If Typescript/Javascript aren't your thing, let me know the frameworks you want to see it in! Making Pokemon Games is how I learn these things!

In a terminal run the following commands:

mkdir pokemon-game
cd pokemon-game

# this creates a node.js project with all the defaults
yarn init -y 

# add the necessary dependencies as "devDependencies"
yarn add -D typescript ts-node @types/node

# initialize our Typescript project
yarn tsc --init

# it's always a good idea to keep your source data in a single directory
mkdir src

# here's the entry point to our app
touch src/index.ts

# create a .gitignore file so our node_modules aren't picked up
echo 'node_modules' > .gitignore

# add git to our project
git init

# add everything (excluding the node_modules in our .gitignore)
git add .

# save the game!
git commit -m "initial commit"

At this point, you should have the following files:

.git/
src/
  - index.ts
package.json
tsconfig.json
yarn.lock

If you want a section on Git, let me know and we can cover that! There are a ton of things to learn about it, but you can get 80% of the benefits knowing less than 5% of the aspects of Git. But I always use it as a safety net so I don't lose work, even if I never push it to a remote repository.

In our ./src/index.ts, let's put the following line of code in there, just as a check to see that everything is alright:

 console.log("Hello world!");

In our package.json, let's add a scripts section and a start command, so that our file looks like this:

{
  "name": "pokemon-game",
  "version": "1.0.0",
  "main": "index.ts", // let's change this from .js -> .ts
  "author": "<your name and email>",
  "license": "MIT",
  "scripts": {
    "start": "ts-node src/index.ts",
  },
  "devDependencies": {
    "@types/node": "^18.0.6", // these just happen to be the versions I used
    "ts-node": "^10.9.1",     // you should be safe with any version, so don't
    "typescript": "^4.7.4"    // worry about matching mine exactly.
  }
}

So if we run the following command:

yarn start

It should print the following:

Hello, world!

If you run into any issues, let me know! I can put some troubleshooting below!

A description of the packages we added and why!

ts-node allows us to build and run Typescript files at the same time. Normally, you need to "transpile" Typescript into Javascript (typescript has a built-in transpiler) but this just simplifies the process. It's a bit slow, but we'll be using more advanced tooling in the future like nodemon and transpilers.

typescript is a bit of an obvious one, but it allows us to run things in typescript. In the future, we'll be using more of the Typescript features, but for now, we use it in tandem with our tsconfig.json, which it generated for us when we ran yarn tsc --init.

@types/node is an important package that holds the types for the Node.js ecosystem. Typescript requires us to define our types, and there are some that are unique to different libraries that we can install alongside the libraries themselves. In this case, there is an insane amount of node types and they so graciously bundled those all together for us for our convenience.