React VR allows you to create compelling VR experiences. Heroku is the easiest way to deploy your web app.
In this tutorial will walk you through pushing your React-VR website to Heroku.
-
clone the repo
-
yarn install
to grab all the necessary dependencies. -
Then run
yarn start
and open http://localhost:8081/vr/ in your browser. // this is to see initial build
-
Change the Pano img a. Add Pano image to
static_assets
folder b. Open index.vr.js c. In the render() change <Pano source={asset('ASB1.jpg')}/> to --> <Pano source={asset('Your_Pano_Img_File_here.jpg')}/> -
Change the images on the computer screens a. Add images to
static_assets
folder b. Open index.vr.js c. in the constructor() resumePosition: change image: 'EvansWangResume.jpg' to --> image: 'your_resume_img.jpg' -
Change the link on the computer screens a. Add images to
static_assets
folder b. Open index.vr.js c. in the constructor() gitHubPosition: change url: 'https://www.linkedin.com/in/evansjwang/' to --> url: 'https://www.yourcustomlink.com' -
Change image locations and rotations a. Open index.vr.js b. in the constructor() resumeBlurbPostion: { width: 30, height: 7, translateX: -65, translateY: 92, translateZ: -55, rotateY: 40, }
- run
npm run bundle
- this creates a new folder called build under the vr folder - create a new folder on desktop called production
- copy index.html, static_assets, and all contents from the new build folder to your new desktop folder production
- rename index.html to home.html
- open home.html
a. change line 9 from:
<script src="./client.bundle?platform=vr"></script>
to<script src="./client.bundle.js"></script>
b. change line 15 from:'../index.bundle?platform=vr&dev=true',
to'./index.bundle.js'
, cd
into desktop/production // this will trick heroku to thinking this is a PHP apptouch
composer.jsontouch
index.php- open index.php and add the following:
<?php include_once("home.html"); ?>
- open composer.json and add:
{}
- git add .
- git commit -m "Almost there"
- git push heroku master // assuming you have linked Heroku to this folder