What we are building
By the end of this post we will have setup a basic javascript project structure to use for html 5 game design which includes.
- How to setup an
npmproject npmrun scripts- Serving up static files via a http server.
If these are new concepts to you, don't worry I will go over each part in detail. The instructions will be for mac but similar commands and process can be followed to setup a similar project on other operating systems.
The final code and example can be viewed above.
Installing node and npm
Our game project setup requires that we have npm and node installed, their purposes are described below.
node: An open-source cross-platform back-end javascript environment that can be used to run javascript applications.
npm: Stands for node package manager and helps us manage dependencies (libraries) for our projects.
There are many ways to install applications on a mac. Homebrew is a library that makes it easy to install new dependencies on your system. We will use Homebrew to install the node dependency which will also install npm.
Run the below command in the terminal to install Homebrew.
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
To confirm brew has been installed successfully run brew --version and check that a version is returned in the output.
Now run brew install node to install the node package, which will install node and npm.
To confirm node and npm are installed run node --version and npm --version, you should see their respective versions in the terminal output.
Initial file structure setup
Create a new directory where the contents of our application code will live.
In your chosen directory create a src directory and inside it create a file called index.js and add the following line inside it below.
console.log('Hello game development!')
Setup npm project
To work with node and npm we need to setup a npm project, the steps are defined below.
Follow the steps below to setup your own npm project.
Initialise an empty npm project. By running npm init. You can accept all the default values, we'll go over what they mean and can change them later.
This will create a file named package.json that will contain your projects configuration relating to the dependencies it requires to function.
It should look similar to below.
{
"name": "basic-typescript-env",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Most of the fields are well named and fairly explicit to what they are but I will go over a few of them.
main: Entry point to our application. This will set the default exported class as our application's entry point.
scripts: Here we can define commands <command> that will be run when we write npm run <command>.
Running our application
We can use node to run any .js file. To test this out run the below command.
node src/index.js
You should be greeted with the message Hello game development! in the terminal.
Lets automate running our application via the npm script commands.
Inside package.json add a new script called start that has the command node src/index.js. The scripts section of package.json should look like below.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node src/index.js"
},
Remember to add a trailing comma next to any previous script on the line above.
Now run npm run start and you should be greeted with the message Hello game development!.
Add html
Our game will require a html canvas that we can draw on and a web-page to display the canvas.
Create an index.html file in the src directory and add the below code to it.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>* { padding: 0; margin: 0; } canvas { border: 2px solid red; display: block; margin: 0 auto; }</style>
</head>
<body>
<canvas style="width: 95%; max-width: 850px;" id="gameCanvas"></canvas>
</body>
</html>
The above code is a simple html page that sets some meta properties about the page and how it should be viewed in a browser. It applies some styling (a red border) to the canvas as well as some width properties to make the canvas responsive to different window sizes.
We can view the index.html file in the browser by opening it with your given browser or by running open src/index.html command in the terminal.
Once open a red square outline (the canvas) should be displayed!
Connect html to js script
A static canvas is fairly limited and for a game we require the canvas to be updated. We will interact with the canvas via our index.js script.
Update the index.html file to include the below script tag in it's <body> tag under the canvas tag.
<script type="module" src="index.js"></script>
Open the index.html file in the browser again and open up the developer console. In Google chrome this can be done by right clicking the page and selecting inspect then navigating to the console window tab.
In the console you should see an error, stating that the script cannot be loaded due to failed cors policy. This is a security feature of most modern browsers that block html files running scripts via the default file server protocol.
Setting up a local file http server
In order to run scripts via html locally and avoid the cors security issue we need to host our local directory via a static web server.
Run the below command to install http-server.
npm install http-server --save-dev
Make the following updates to package.json as described below.
- Add a build script to delete and create a
builddirectory. Copy ourindex.htmlandindex.jsfile to thebuilddirectory. - Add serve script to create a local http file server pointed at our
builddirectory. - Update start script to point to our build folder
index.jsfile.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "rm -rf build && mkdir build && cp src/index.html build && cp src/index.js build",
"start": "node build/index.js",
"serve": "http-server build"
},
Run npm run build.
This command copies all the files required to run our app to the build folder. Now our index.html and index.js should have been copied to the build directory.
Run npm run serve
This command will start the http-server pointed at the build folder and output an endpoint for the server. Navigate to the endpoint in the browser (typically localhost:8080).
You should see our red canvas border and when you view the console in the browser you should no longer see the cors error and should instead see the Hello game development! message.
Having a folder responsible for storing the built application is standard web development practice. At the moment we are copying all our files exactly as they are but in a future post we'll look at how we can use a compilation step to handle typescript files.
Finish
Now we have a way to compile the static files required for our app to the build directory and serve them locally.
Checkout the next part of this tutorial below to make our project support typescript!
