PixiJS Setup with Vite and TypeScript

While trying to get started with PixiJS I noticed there was no great guide to setup PixiJS with a bundler. So after a bit of fiddling, I came up with a nice setup. It uses Vite as the bundler. Let me share it with you.

Quick note: This is just a bare minimum basic setup, and might not be the best fit for your project. But I still think it will provide a good starting point for your next PixiJS project.

Setting up Vite

You might know Vite as the bundler for Vue, but that's not the only thing you can use it for. In this case, we'll use it with PixiJS.

Run the following command:

npm create vite@latest

If you've never run it before it will prompt you if you want to install Vite, say yes. Then you pick the following options

> project name: <your-project-name>
> Framework: Vanilla
> Variant: TypeScript (if you want typescript)

You can also do all of this in one command:

npm create vite@latest <your-project-name> -- --template vanilla-ts

After which you can run the following two commands to install the required packages and start the dev server

npm install && npm run dev

After this, you can go to http://localhost:5173/ to see your Vite project running.

Setting up PixiJS

Now that Vite is up and running it's time to get PixiJS running.

First, we'll install PixiJS with npm:

npm install pixi.js

Navigate to src/main.ts and replace the contents with the following:

import * as PIXI from 'pixi.js';

(async () => {
    const app = new PIXI.Application();
    await app.init({
        width: 640,
        height: 360
    });

    document.body.appendChild(app.canvas);
})();

If you have your dev server still running it should automatically reload your app, otherwise restart the server with npm run dev.

In the browser, you'll see a white page with a black rectangle. This black rectangle is a <canvas> element that PixiJS created for you.

You are now ready to develop your PixiJS app! Good luck.

If you're running into issues, drop a comment down below. Alternatively, you can also look at my repository on GitHub that has this code (plus a bit more) to get you started.

That's it for now, have a lovely day!

if you're looking for a way to host your PixiJS app for free, check out my article about hosting web apps on Cloudflare for free.

Host your web app for free on Cloudflare Pages

Mr. Linxed ・ Apr 25

#webdev #tutorial #beginners #frontend