Categories
Tutorials Unity

Hosting WebGL App for Free with Firebase

I explain the process for hosting your Unity webGL for free with firebase. No private domain name needed. The first time you do this, it takes some time to get things set up on your computer. Once you’re good to go, the whole process from then on out will only ever take you a few minutes.

If you’re not comfortable working with this command line approach, check out Github pages for your free app hosting needs.


Install Firebase

Go to https://firebase.google.com/ and create a free account. In your console, add a new project.

Next, click into the ‘Hosting’ tab in the left sidebar and click the ‘Get Started’ button. Follow the instructions to install Firebase on your computer’s shell (e.g., terminal or command prompt.)

If you get an error message, you may need to install the current version of node.js on your computer, restart, then run the install command again.

 

Initialize Your Project

1. Notice the starting path in your command window. Create a new folder within this directory for your project (to be referenced in (3.) below).

2. Continue to follow the Firebase instructions to login by typing in the command “firebase login” + enter.

3. Next, type “cd WhateverYouNamedYourFolder” + enter. Now you’re inside your app’s root directory.

4. Finally, type in “firebase init” + enter. You’ll be asked a series of questions:

  • Select the feature “Hosting: Configure and deploy Firebase Hosting sites.”
  • Choose to use your existing Firebase project.
  • Yes to a public directory.
  • No to a single page app.
  • No to Github.

 

Deploy Your App

After successfully initiating your firebase project, you’ll notice a ‘public’ folder has been created in your root directory. Copy and paste the build files of your Unity project into this public folder, replacing any ‘index’ file within it.

Finally, in your command window, type “firebase deploy” + enter. This can take a few minutes depending on the size/compression of your files.

Two lines below the “Deploy Complete” message, you’ll see a ‘Hosting URL’. Copy & paste into a browser to confirm everything is looking good. This is the URL you can share with clients. It is associated with your firebase project and will be the same link no matter how many times you update/deploy your app.

***Note for those of you working with Unity 2021, if you get a compression file type error, re-build your Unity project with Player Settings> Publish Settings> Compression> Disabled and re-deploy.

 

 

I hope this tool makes it easier for you to share your beautiful designs with your clients, colleagues, and friends. For more information on 360 interactive browser renderings, see my post on Unity WebGL apps.
Subscribe to my youtube channel for more tutorials on Unity and WebGL.

 

Featured image icon made by Payungkead from flaticon.com

 


You May Also be Interested In...