Generally, Unity WebGL builds do not work well on mobile, but that doesn't keep ingenious engineers like ourselves from trying!

We'll look at how to serve a Unity build locally and then how to serve it on the internet without the need for a web hosting service!

For this tutorial, you'll need an LTS version of node.js installed, as well as the serve npm module and ngrok.

Once you have node installed node.js, you can install the required packages via the command line:

npm i -g serve
npm i -g ngrok

Serve locally

When you Build + Run a WebGL build from Unity, it will generally start a local server on a random port at an address like this:

http://localhost:32174

That's great, but as soon as we rebuild our project we'll be at another port number with a server that Unity doesn't give us much access to.

For that reason I prefer to serve my project from the command line. Assuming you have the serve node module installed, you can just do this:

cd unity_webgl_build_directory
serve

When you run serve, it tells you the local address; usually http://localhost:5000

If this trips you up, you can check our other article with more details about how to serve your project locally.

Serve on the Internet

Now we have our game running on localhost:5000 with serve. But if we go to our mobile device to localhost:5000, we'll get a page not found error. What gives?

Localhost is usually local to your PC and not even your internal network. So when we load this URL via phone, it won't work.

So we'll use ngrok to create a public URL.

In a new terminal / command line window type:

ngrok http 5000

This tells ngrok to serve the localhost content from port 5000 to the internet.

When you run it, you'll see something like this:

Forwarding                    http://8d5a6149.ngrok.io -> http://localhost:5000                                                                                                                                  
Forwarding                    https://8d5a6149.ngrok.io -> http://localhost:5000    

Next, on your mobile device, go to your autogenerated ngrok url: https://8d5a6149.ngrok.io

With any luck, you'll be able to try out your game on mobile to see how it performs.

Aside

I've seen many people using our site simmer.io for testing on mobile, and I often get support requests about why games don't work well on devices! Unfortunately, this is beyond our control, as Unity WebGL is mainly designed for desktop browsers.

Whenever I get one of these requests, I often perform the steps above with a bare (non-simmer) build. If the basic version doesn't work well on mobile, it also will not work well on SIMMER, and there's not too much we can do to help there.

Unity's solution to this is Tiny Mode. It's a fairly experimental feature, but it does seem to be coming along.

I've created a short video about getting started with Tiny to help out.

Conclusion

To sum it up:

npm i -g serve
npm i -g ngrok

cd <unity webgl directory>
serve

//create a new command line window
ngrok http 5000

//will print out a public url that you can go to on your mobile:
// ex: https://8d5a6149.ngrok.io

Hopefully this will give you a way to easily test your builds on mobile and pinpoint any problems that might occur with Unity WebGL on Mobile.