Install the PureWeb React Web Client Template

Having a properly configured package of your game to stream is a big step forward. Next we need a web client to load and display the stream in the user’s web browser. Once the basic web client is running, you’ll be able to add in further customizations such as authentication, responsive UI elements for different devices such as tablets & mobile, and much more.

Let’s not get too far ahead of ourselves just yet, and get that web client ready to roll!

Open a command prompt on your local machine and navigate to the folder you want your web client files to reside in. Type the command below, where my-app is the name of the folder you want to create.

npx create-react-app my-app --template @pureweb/cra-template-pureweb-client

This will generate a typescript-based react application, ready for you to customize and configure to your needs.

Configure The Web Template to Stream Your Game

In order to point your client at a specific project and model that is already hosted on the PureWeb platform you will need to configure some parameters in the client.json, located in the my-app/src folder you created in the previous step.

{
	"projectId": "b1f3a842-42e1-40b5-9f04-480cf87b59c8",
	"modelId": "72e23f8d-c68b-422d-9f81-004922bfc37a"
}

You can optionally specify a version of the model to use.

{
    "projectId": "b1f3a842-42e1-40b5-9f04-480cf87b59c8",
	"modelId": "72e23f8d-c68b-422d-9f81-004922bfc37a",
    "version": "myProjV2"
}

Alternatively, the projectId, modelId, and optional version can also be specified through query parameters in your web browser:

http://localhost:3000?projectId=b1f3a842-42e1-40b5-9f04-480cf87b59c8&modelId=72e23f8d-c68b-422d-9f81-004922bfc37a&version=myProjv2

Run Your Web Client

Save any changes you’ve made to your client.json file then return to your command prompt window. Change to the my-app folder (or whatever folder name you created) and run the following command:

npm start

Your default browser should automatically open a new tab and start your React web client, which now points at the project and model you uploaded through the PureWeb console (see here for more info).

Other Useful Commands

npm start → Starts the development server.

ctrl+C → stop running the development server.

npm run build → Bundles the app into static files for production.

npm test → Starts the test runner.

npm run eject → Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!

Customize Your Web Client

With your package uploaded to the PureWeb console, and our React web client template ready for customization, you now have all the tools necessary to create a great experience for your clients, customers and fans.

Developing a React App

For more information about developing in React to fully customize your web client, we recommend exploring https://reactjs.org/docs/getting-started.html.

We also have a growing library of examples to help you get started:

React Developer Tools Plugin

React Developer Tools
Adds React debugging tools to the Chrome Developer Tools. Created from revision d0ec283819 on 7/16/2021.

This plugin for your browser (available for Chrome and Firefox) provides the ability to inspect the React component tree with your browser's developer tools. This means that you can check the properties and states of React components on your page, which is incredibly useful during the development process!

After installing the plugin, the React tabs “Components” and “Profiler” should become available in your browser's developer tools. Open the “Components” tab to inspect the component tree of the page. Additionally, you can right-click on any element on the page and click “Inspect” to open the developer tools.

Build & Deploy Your Web Client

When you’re happy with your web client, you need to build it for deployment on a web host. In your command prompt window type npm run build to start the process.

Simply follow the output instructions to deploy the build folder.

You can find out more about deploying your web client at https://create-react-app.dev/docs/deployment/.

Full-Stack Local Testing

Note that you can combine the local streaming agent described in Test Streaming Your Project Locally, with the tools described above to create a complete local testing environment.

References:

  1. https://www.npmjs.com/package/@pureweb/cra-template-pureweb-client
  2. https://www.npmjs.com/package/@pureweb/platform-streaming-agent