Build Xbox App with React - Redvike
6 February 2019

Build Xbox App with React

6 February 2019

Build Xbox App with React


Bartłomiej Rogacewicz
Article mage
6 February 2019

Build Xbox App with React


Bartłomiej Rogacewicz
Article mage

Before I start working on my first Xbox application I thought that I need to know at least one native language like C# to build it. But after some research, I had recognized that all I need is JavaScript. (And WIN10, Visual studio with gigabytes of dependencies).

So if it’s possible to write such an app in JavaScript maybe I should learn  React Native? Nope!

You can write an application in React and adjust it a little bit to use it on Xbox like almost native. But we need to remember that Xbox offers us only 25% of its power to use this app and that’s why we really should take care of the optimization of code. It’s possible because Microsoft gives us tools to create hosted universal web application (UWA) which, in fact, runs in Microsoft edge web view. It means for us – developers, that we can use all features which are compatible with the latest version of Microsoft Edge.

xbox app

Creating a basic React application

To create React application I personally recommend using Create React App boilerplate created by the Facebook team and React community. Basically, we need to install it globally using npm and then create an application with a single command.

Installation of CRA

npm install --global create-react-app

# On OSX or Linux it requires higher write access
sudo npm install --global create-react-app

Creating your project

create-react-app my-xbox-app

# and run it
cd my-app
npm start

After `npm start` the app should run on address localhost:3000 and you can open it in the browser or use it later during the creation of the Universal Windows App (UWA)

We need to add an additional library called DirectionalNavigation to allow users to navigate on the Xbox app using a game controller. Unfortunately, this package isn’t available on npm and we must download it to our project and import it inside the `index.js` file and that’s it. After import, the code from a library will be executed and you will be able to use a game controller or just a computer keyboard.

Creating Visual Studio App

As I mentioned before to create Xbox app we must have Windows 10 and Visual Studio. What’s more, we must enable developer mode on our machine to be able to do it. I’m not going to describe it step by step because it’s well described here.

Install Visual Studio Community Edition

It’s very important to check the Universal Windows Platform during the installation of Visual Studio. After installation, we can start the creation of the UWP application.

Create application

  1. Launch Visual Studio 2015.
  2. Click File.
  3. Click New Project.
  4. Under JavaScript then Windows Universal, click HostedApplication, and then click OK.

Configure application

  1. Inside tab Application in field Start page paste your React app link. In this case, it can be localhost:3000 on which the app is currently running.
  2. Inside tab, Content URIs change to localhost:3000
  3. Save file.

Run your application

Use the Local Machine option in Debug section.

  1. In the toolbar click the green arrow which appears before the Local machine option.
  2. Use the Remote machine option in Debug section to debug the application on an Xbox device.
  3. Install Dev Home application on console from Store
  4. Run Dev Home application as it’s described here.
  5. From Debug context menu choose Remote machine and click Run.

At first start, it will ask to set up the configuration of the Remote machine and in a field called Machine name, you should paste the IP address on which Dev Home has been set up. The address is visible in the bottom right corner as on the screenshot.

xbox screen shot

If this is your first deployment, you will get a dialog from Visual Studio asking to PIN-pair your device. To obtain a PIN, open Dev Home from the Home screen on your Xbox One console. On the Home tab, under Quick actions, select Show Visual Studio pin.

Summary: Xbox React App

Now you can start building your Xbox applications, but you may ask Why should I do that? The answer is pretty simple.

Microsoft Xbox has currently 57 million active users around the globe. By creating applications for more platforms you can extend your current group of users or give current users an opportunity to use your product in more ways. This is a common approach in many companies to build applications for multiple platforms to reach more customers. The best examples of that approach are companies like Netflix or Spotify which give users Xbox applications to watch movies or listen to music. Another very important thing worth highlighting is that people tend to use their consoles more often than personal computers because they’re cheaper and more efficient to use.

Related blog posts

Interested? - let us know ☕
[email protected] Get Estimation