Build Xbox App with React
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.
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
# and run it
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.
- Launch Visual Studio 2015.
- Click File.
- Click New Project.
- 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.
- Inside tab, Content URIs change https://example.com to localhost:3000
- Save file.
Run your application
Use the Local Machine option in Debug section.
- In the toolbar click the green arrow which appears before the Local machine option.
- Use the Remote machine option in Debug section to debug the application on an Xbox device.
- Install Dev Home application on console from Store
- Run Dev Home application as it’s described here.
- 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.
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.