React-360: Bundling for production

[hjnieuwenhuizen]

Hi, having an issue with getting my web app bundled for production. I ran npm run bundle and changed my script source files as follows:

    <!-- When you're ready to deploy your app, update this line to point to your compiled client.bundle.js -->
    <!-- <script src="./client.bundle?platform=vr"></script> -->
    <!-- Production -->
    <script src="./build/client.bundle.js?platform=vr"></script>
    <script>
        // Initialize the React VR application
        ReactVR.init(
            // When you're ready to deploy your app, update this line to point to
            // your compiled index.bundle.js
            //'../index.vr.bundle?platform=vr&dev=true',
            './build/index.bundle.js?platform=vr',
            <!-- Production -->
            document.body
        );
    </script>

I have pano and then normal image components. The pano images are loading fine when i copied the static-assets folder to the vr root. However my images that it is getting from the build folder is not being rendered.

[andelar]

Happy to offer some community help:

Normally:

• You upload the contents in the build folder to your site, rather than the build directory
• Then the two references in the index.html are ./client.bundle.js?platform=vr and ./index.bundle.js?platform=vr
• In same directory on your site you copy the static_assets directory
• The location of your images is then handled by asset() for you. If you want to reference the files directly with URI instead, you then need to change from your development default setup of source={{uri: '../static_assets/pic.jpg'}} to source={{uri: './static_assets/pic.jpg'}}

Good luck! :-)

[hggeorgiev]

I think what @andelar described should be put in a guide in the docs because currently, it is not 100% intuitive and they are several gotchas. I'm also willing to help with that.

[hjnieuwenhuizen]

Thank you for your reply. I am using the asset() method for getting my pano images and i have changed the links for my bundled scripts within the index.html file. The documentation said i must use require for the image component. Please see error above. The images are in that location it is trying to access it from. Am i meant to use require and asset together?

[andelar]

Your screenshot serves something from .build/ which shouldn't be the case.
After you build, stand in your project directory and do
serve build
Then at the root of the served site you should have all of index.html, the two JavaScript files and the static_assets directory which you copied into the build folder.

[mikearmstrong001]

The current guide is located here. I'd be very interested in what you would embelish as sometimes our perspective is very close to the use.

https://facebook.github.io/react-vr/docs/publishing.html

[mannyhenri]

So I created the bundle, and updated the HTML file to link to the proper files. But for some reason the bundle references the right directory for the 3D static assets but 2 of them don't load and the reference path looks ok to me. What am I missing?

[andelar]

@mannyhenri : Switch to the Network tab in Chrome and you will see what file the browser actually tried to load and failed.

I have gotten the obj/mtl to work in live-tour-lab and there is a good example in the react-vr repo also.

Note that many .mtl files have absolute paths for textures in them. Just edit the .mtl file and remove the path, then put the jpg/png etc in the same directory as the obj and mtl file.

[jgwinner]

Hey, great guide here.

One note: depending on what exporter for .OBJ files you are using, you may be able to fix that when exporting. Blender's OBJ exporter will.

== John ==

[andrewimm]

Bundling should now be a one-step process in React 360

[feliIhirwe]

have they fixed that?