This is a continuation of my previous where I detailed what tools I would be using. This post will continue where I left off and go over setting up my development environment for anyone that wants to follow along.
Tools Needed
To follow along you will need the following tools/programs installed.
- Visual Studio Code (other Code editors or IDEs should also work)
- NPM
- Git
This should be all that is necessary for for the initial portion of this project. Once the core functionality of the canvas is complete I will provide details on setting up tools for the back end implementation.
Starting
Starting off I created a fresh Git Repository and cloned it to my machine. If you are new to Git this link should provide some helpful resources to getting started. Before I get to installing all of the modules that I'm going to use I'm going to create a .gitignore file so I don't have to worry about dependencies and generated files getting caught up in the git repository.
With the gitignore in place we can set up some initial folder structure so that as the project grows things remain organized and expandable.
We are almost at the point of being able to start coding, but we need to modify and create some of our config files. The files we will be creating a tsconfig.json and webpack.config.js
I will use these folder in the following manner.
Assets
- Storing images, textures, sounds, and other files that are typically not text encoded.
Dist
- Compiled and output files. Will generally hold the code produced for deployment.
Src
- Source code for building our Phaser 3 project. Once we start writing code we will expand our folder structure for the requirements of building the front end.
Static
- I typically reserve a static folder for files that do not change often like CSS.
With the initial folders setup we will set up our node module with npm and start downloading our dependencies.
NPM
I'm just going to start with a simple npm init command and use the default options. This will create a package.json file that we will want tracked via our source control. Npm will make sure it is updated as move forward and install our dependencies. I will be installing everything as a development dependency because our code will be compiled/built into a single javascript file for us.
The command I will be running is
npm install live-server phaser npm-run-all ts-loader typescript webpack webpack-cli --save-dev
Installed Modules
Phaser
- The game framework used for rendering the canvas and handling input.
Typescript and ts-loader
- The language being used to write our source code.
live-server
- This module allows us to run a local webserver and update/refresh automatically as we make changes.
webpack and webpack-cli
- Used to build our code and bundle it into a single file.
Config Files
Webpack
This is providing some basic settings for webpack and will be directing our output to the dist folder.
This file provide some basic information, like base directory, to be used by the TypeScript compiler.
This is providing some basic settings for webpack and will be directing our output to the dist folder.
tsconfigconst path = require('path');module.exports = {entry: './src/app.ts',module: {rules: [{test: /\.tsx?$/,use: 'ts-loader',exclude: /node_modules/}]},resolve: {extensions: [ '.ts', '.tsx', '.js' ]},output: {filename: 'app.js',path: path.resolve(__dirname, 'dist')},mode: 'development'};
This file provide some basic information, like base directory, to be used by the TypeScript compiler.
Additionally we will be added some commands to be run with npm on our module. To do this we will modify package.json. Specifically the scripts section of the file will be replaced with the following code{"compilerOptions": {"target": "es5","baseUrl": "./src"},"include": ["**/*"]}
"scripts": {
"build": "webpack",
"watch": "webpack --watch",
"host": "live-server --port=8085",
"start": "npm-run-all build --parallel watch host"
},This will allows us to type npm start in our base directory and build/compile our project and automatically host it on a local server that will automatically refresh when any files are modified.
Notes
This is how I set things up on my local machine. I am using Windows and PowerShell as my terminal. Let me know if there any issues that could arise when trying to setup Phaser & Typescript in another environment.
