shaneknows

Let's talk code.

React <3 Unity <3 Github Pages

Recently I have been tinkering with React and really digging how easy it is to get up and running using the Create React App. What makes things even sweeter is how easily you can deploy to Github Pages to show off all of your work. I was able to even port my Unity game to a React app and deploy it to my site here!

Alright you have my attention... how?

Well first off download Node.js and install npm by opening up your command prompt (or use the terminal in Visual Studio Code) and running:

npm install @npm -g

Now that you have npm installed. You will want to install the create-react-app npm package by running:

npm install create-react-app -g

Navigate to the folder you wish to create your app and run:

create-react-app <name of project>

This should take a little bit of time but by the time it finishes you will have a working react app you can toy around with. Make sure you switch to the working directory you just created and you can run the app

cd <your project name>
npm start

Cool now how can I show this off?

Assuming you have a Github account it's quite easy. First create a repository for your current React application on Github. Now back in your project lets install github pages so we can generate and deploy the app as a static site for github pages.

npm install --save-dev gh-pages

Now in your project's project.json we need to add a deploy option under the scripts section:

"deploy":"npm run build&&gh-pages -d build"

This will build our project and publish it to a gh-pages branch under your project.

Now we are almost ready to deploy. First you will want to set your homepage in your project.json file. It should be updated and named https://<username>.github.io/<projectname>

Now run

npm run deploy

to build and publish to the gh-pages branch of our repository. If there isn't a branch, it will be created. Now let's setup our project to enable GitHub Pages. Under the repository settings on Github, find the GitHub Pages section and set the Source to use the gh-pages branch via the dropdown list.

Now again run

npm run deploy

and you should be able to navigate to your homepage URL and find your working app!

Alright so now what about Unity?

Alright so if you don't have a working Unity game feel free to fork mine here. Install the latest version of Unity3d and open the project. Select File->Build and Run. We want to build the project for WebGL so select that option and provide a Folder name. Once the process has complete you should see your game running in a web browser. If everything appears to be working fine, copy the files from the created folder and paste them in the public folder of your React application. This should override the default index.html file. Open up the index.html file and add %PUBLIC_PATH%/ in front of the src tags so our file references will work locally and while deployed. Your file should look something like:

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | {game name}</title>
    <link rel="shortcut icon" href="%PUBLIC_URL%/TemplateData/favicon.ico">
    <link rel="stylesheet" href="%PUBLIC_URL%/TemplateData/style.css">
    <script src="%PUBLIC_URL%/TemplateData/UnityProgress.js"></script>  
    <script src="%PUBLIC_URL%/Build/UnityLoader.js"></script>
    <script>
      var gameInstance = UnityLoader.instantiate("gameContainer", "%PUBLIC_URL%/Build/<game name>.json", {onProgress: UnityProgress});
    </script>
  </head>
  <body>
    <div class="webgl-content">
      <div id="gameContainer" style="width: 665px; height: 400px"></div>
      <div class="footer">
        <div class="webgl-logo"></div>
        <div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
        <div class="title">{game name}</div>
      </div>
    </div>
  </body>
</html>

You will also want to clear out the JSX (The HTML-like syntax found in the render function) rendered in the App.js file. Just return an empty div instead or you will get errors when running. You could also just completely comment out the index.js file if you don't intend on adding any react code. Now test your app by running npm start.

If everything seems to be working, run npm run deploy again and you should see your game running on your Github Pages site!

Happy coding.