https://redvike.com/wp-content/uploads/2018/06/Blumb-Gif-Loader.gif
6 February

Build Xbox App with React

By Dawid Hen

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 is possible to write such app in JavaScript maybe I should know 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 offer us only 25% of his power to use this app and that’s why we really should take care on optimization of code. It’s possible because Microsoft give us tools to create hosted universal web application (UWA) which in fact runs in Microsoft edge webview. That’s mean for us as developers that we can use all features which are compatible with latest version of Microsoft Edge.

Create basic React application.

To creating React application I personally recommend to use Create React App boilerplate created by Facebook team and React community. Basically we need to install it globally using npm and then create 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 running on address localhost:3000 and can open it in browser or use later during creation of Universal Windows App (UWA)

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

Create Visual Studio App

As I mentioned before to create Xbox app we must have Windows 10 and Visual Studio, moreover 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.

Then install Visual Studio Community edition.

It’s very important to check Universal Windows Platform during installation of Visual Studio.

After installation we can start creation of UWP application.

Create Application

  1. Launch Visual Studio 2015.
    1. Click File.
    2. Click New Project.
    3. 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.
  1. Inside tab Content URIs change https://example.com to localhost:3000
  2. Save file

Running application

  1. Use Local Machine option in Debug section.
    1. In toolbar click green arrow which appear before Local machine option.
  2. Use Remote machine option in Debug section to debug application on XBOX device
    1. Install Dev Home application on console from Store
    2. Run Dev Home application as it’s described here.
    3. From Debug context menu choose Remote machine and click Run.
      On first start it will ask to setup configuration of Remote machine and in field called Machine name You should paste IP address on which Dev Home has been setup. The address is visible in bottom right corner as on the screenshot.


    4. 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 you Xbox applications, but you may ask: “Why I should do that”?. The answer is pretty simple. Microsoft Xbox have currently 57 millions of active users around the globe. By creating applications for more platforms you can extend your current group of user or give current users an opportunity to use your product in more ways. This is common approach in many companies to build applications for many platform to reach their consumers and the best examples of that approach are companies like Netflix or  Spotify which give users Xbox applications to watch movies or listen music. Another very important thing worth highlighting is that people tend to use their consoles more often that personal computers because they’re cheaper and more efficient to use.

Keep reading
Show all new’s
Dependency Injection in Angular
Dependency Injection in Angular

Introduction So, Dependency Injection is a Design Pattern which became really popular in software development recently, mostly because of Java […]

Read more
What’s new in React 16.6 and 16.7?
What’s new in React 16.6 and 16.7?

The version 16.6 of React was released on 24th October 2018. We can divide features and changes from this release […]

Read more