Website

The game can be distributed as a website. The game can be played on the browser and can be accessed by anyone with an internet connection. To do this you need to host the game on a server.

Hosting and Deploying

You can use various hosts like Firebase, Vercel or Netlify (these are completely free). All will have similar setup processes that need to be completed.

Firebase Hosting

For this guide, Firebase will be used as the hosting example. Why Firebase? Because it have more features than the others, like the ability to host a database, authentication, and more. Also, Firebase is a Google product, so it is very reliable.

First, if not already available, create the project in Firebase.

Next, in a Terminal, install the Firebase CLI:

npm install -g firebase-tools

If it's the first time you use firebase-tools, login to your Google account with:

firebase login

With the Firebase CLI installed, run (within your project):

firebase init

The CLI prompts:

"Which Firebase CLI features do you want to set up for this folder?" Choose Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys.

Create a new Firebase project or select an existing one.

"Select a default Firebase project for this directory:" Choose the project you created on the Firebase website.

"What do you want to use as your public directory?" Enter dist.

Configure as a single-page app (rewrite all urls to /index.html)?" Enter yes. (Answering this question will ensure that routing, hard reload, and deep linking work in the app)

"File dist/index.html already exists. Overwrite?" Enter no.

GitHub Action deploys are optional. If you want to set up automatic builds and deploys with Github, answer the following questions:

Set up automatic builds and deploys with Github? Enter yes.

For which GitHub repository would you like to set up a Github Workflow? Enter your project name.

Set up the workflow to run a build script before every deploy? Enter yes.

What script should be run before every deploy? Enter npm ci && npm run build.

Set up automatic deployment to your sites live channel when a PR is merged? Enter yes.

What is the name of the get hooked branch associated with your sites live channel? Enter your project's main branch name.

A firebase.json config file is generated, configuring the app for deployment.

The last thing needed is to make sure caching headers are being set correctly. To do this, add a headers snippet to the firebase.json file. The complete firebase.json looks like:

{
  "hosting": {
    "public": "dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

For more information about the firebase.json properties, see the Firebase documentation.

To deploy the app, run:

npm run build
firebase deploy

Enable the ADD TO HOME SCREEN (PWA Plugin)

It could be very beneficial to enable the ability to install the website as a "browser application" and be able to use it as a standalone application on the device.

If you are using Vite js as a build tool, you can use the PWA Vite Plugin. You can copy this exemple.

Else, you can create the manifest.json, it depernds on the framework you are using.