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.
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.
npm install --global create-react-app # On OSX or Linux it requires higher write access sudo npm install --global create-react-app
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.
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.
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.
Use the Local Machine option in Debug section.
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.
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.
