Skip to main content

Step 0 - Setting up Your TypeScript Environment

info

You can skip this step if you have a preferred environment setup

Excalibur has a number of templates for various development environments, pick your favorite 💖

Setup your npm project with npm init, it will ask you for a series of questions and at the end you'll have a package.json file that describes how to run your project and it's dependencies

There are many ways to convert TypeScript into JavaScript so that it can be run by your browser. Vite is a popular choice because of it's ease of use and smart defaults out of the box. So called a "zero-config" bundler, however you can provide a configuration if you need to.

Download vite and typescript via npm as dev dependencies, these are dependencies that are only needed at development time.

sh
npm install vite typescript --save-exact --save-dev
sh
npm install vite typescript --save-exact --save-dev

Download excalibur via npm as a normal dependency

sh
npm install excalibur --save-exact
sh
npm install excalibur --save-exact

In your package.json file modify your scripts: section to add a few scripts.

json
"scripts": {
    "start": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview"
},
json
"scripts": {
    "start": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview"
},
  • npm run start will start your app in dev mode and start a dev server you can browse to
  • npm run build will first run the TypeScript compiler tsc to type check, then run vite's build to produce output HTML/JS/CSS for production.
  • npm run serve will just serve a dev server, good for checking production builds.

Create an index.html and a main.ts, with vite you can directly include a reference to your TypeScript files, normally you cannot do this without a bundler like vite.

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Excalibird</title>
  </head>
  <body>
    <script type="module" src="./src/main.ts"></script>
  </body>
</html>
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Excalibird</title>
  </head>
  <body>
    <script type="module" src="./src/main.ts"></script>
  </body>
</html>