# Easy WebGL Hosting with PlayFlow ## How PlayFlow makes WebGL hosting easy For seamless WebGL gaming experiences in web browsers, secure WebSocket connections are crucial, but configuring them can be complex. Often, developers end up managing certificates and networking issues, which can be time-consuming. **With PlayFlow,** however, you only need to enable a simple option to handle these concerns effortlessly. ## Before we begin... This tutorial assumes you've read the [getting-started-with-playflow](https://fish-networking.gitbook.io/docs/guides/server-hosting/services/playflow-cloud/getting-started-with-playflow "mention") tutorial already. In the following steps we will convert our project support WebGL. {% stepper %} {% step %} #### Install Bayou For FishNet connections on WebGL we will need to use a web supported transport; there are multiple available, but this tutorial will be using [Bayou](https://fish-networking.gitbook.io/docs/fishnet-building-blocks/transports/bayou). Head over to the Bayou Github repo and download the most recently released `unitypackage` file and then import it into your project. {% embed url="" %}

{% endstep %} {% step %} #### Add Bayou to your Network Manager Now that **Bayou** is imported into your project, you can select your [NetworkManager](https://fish-networking.gitbook.io/docs/fishnet-building-blocks/components/managers/network-manager) and add the component to it.

{% hint style="info" %} If you have more than one [transport](https://fish-networking.gitbook.io/docs/fishnet-building-blocks/transports) on your **NetworkManager**, such as [Tugboat](https://fish-networking.gitbook.io/docs/fishnet-building-blocks/transports/tugboat), then you will need to add the [TransportManager](https://fish-networking.gitbook.io/docs/fishnet-building-blocks/components/managers/transportmanager) component, and drag Bayou into its **Transport** field to set it as the active one. {% endhint %} {% endstep %} {% step %} #### Enable WSS In the Bayou component, enable the **Use WSS** option. This will tell Bayou to use Web Socket Secure. Doing this will show a bunch of **SSL Configuration** options below, but we don't need to do anything with them for this setup.

{% endstep %} {% step %} #### Build your PlayFlow server Open the PlayFlow Cloud Window from the Unity toolbar (**PlayFlow → Playflow Cloud**). Click the **Upload Server** button to build and upload your Unity server.

{% endstep %} {% step %} #### Set the correct PlayFlow port protocol Open the [PlayFlow dashboard](https://app.playflowcloud.com/) in your browser and navigate to the **Configuration** tab. Edit or add your port and choose the **TCP** protocol and be sure to **Enable TLS**.

{% endstep %} {% step %} #### Start a PlayFlow server Now head over to the **Server** tab in PlayFlow and create your server instance.

{% endstep %} {% step %} #### Prepare your client build If you click on your server instance's **Details**, you will see a **Host** and **External Port** that you will be able to connect your clients to. Open Unity, select the Bayou component, and enter these into the **Client Address** and **Port** fields respectively.

{% endstep %} {% step %} #### Building your WebGL client Now let's build the WebGL client. In your Unity build profiles, be sure to switch to the **Web Platform** and then build your game. Once that's done you can zip the built files and upload it to your chosen hosting site and run your game in the browser!

For this test we have created a project on Itch.io and uploaded the client build to it.

{% endstep %} {% endstepper %} ## Success! Just like that, we were able to create a server and have our clients in the web browser securely connect to it. If you want to check out more of their features, you can check out their documentation here: You are also encouraged to join their Discord server here: --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://fish-networking.gitbook.io/docs/guides/server-hosting/services/playflow-cloud/easy-webgl-hosting-with-playflow.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.