• Part 1: Virtual Reality Tour with React360
  • Getting Started
    • Tech Stacks
• Setting up the Dev environment
  • Steps to setup the environment
  • Create a new React360 Project
    • version control set-up
  • Steps to setup the environment
• Part 2: The Backend
• Part 3: Continuous Delivery and version control
• Contributors

A React360 Virtual Reality, Graphql, Apollo, Microservices and Kubernetes

Part 1: Virtual Reality Tour with React360

Part 1: Virtual Reality Tour with React360

Getting Started

Tech Stacks

React360	JavaScript	Django	GraphQL	Apollo	Python

Inspired by Facebook VR

This is a Virtual Reality experience created using the opensource Facebook's React360 library that makes use of threejs.

In this awesome experience, I am going to create an amazing 360 and VR experience for the Facebook Developers Nairobi community and showcase the power of using Javascript to create VR experiences for Web and cross-platform devices augment the current virtual reality experiences of others such as unity3d, Vive, Samsung Oculus and many others.

I will be adding a backend api to act as a data store. This repo will be continuously be updated and new technologies introduced with time, such as, Dockerising our app to leverage the power micro-services and managing and scaling our apps with Kubernetes. We will eventually deploy and run this app on one of the popular cloud providers such as AWS, Azure of Google Cloud.

To get started with React360 this, hit on Facebooks official React360 docs

We can alternatively switch Django Graphql with API server module for Node/Express backend Parse-server

Setting up the Dev environment

Steps to setup the environment

• Make sure you've the following installed on your developement PC, Mac or Linux machine:

• Node
• NPM or yarn
• react-native
• react
• react-360-cli

• You can install them by entering this on your terminal:

yarn add global react react-native react-360-cli

Create a new React360 Project

React360 use the React-native $ mkdir EcommerceReact360VRTour && cd EcommerceReact360VRTour $ echo "# EcommerceReact360VRTour" >> README.md $ react-360-cli init React360VRTour $ cd React360VRTour

version control set-up

$ git init
$ git commit -m "first commit"

Hit your cloud Git hoster and create a new empty repository, either Github.com, Bitbucket or Gitlab or any other cloud hosting platform. I chose to use Github and named my repo similar name as my current projects root directory, i.e EcommerceReact360VRTour

``sh $ $ mkdir .circleci/config.yml

# open your root project directory
$ git remote add origin [email protected]:<your-github-username>/EcommerceReact360VRTour.git
$ git push -u origin master

Move the index.html to ./Public folder and update imports on

Steps to setup the environment

Add some testing

Update your package.json to include testing tools such as In /src add the following test file

import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

configure({ adapter: new Adapter() });

Part 2: The Backend

Now we can add a backend API or utilise one if we have it on our development stack.

Part 3: Continuous Delivery and version control

We are going to use Docker containers for our application.

Create a bash script test.sh to be used by our automating & CI testing pipeline Travis CI

In the React360VRTour directory add the following file for CICD Pipeline. Edit the file to have

sudo: required

services:
  - docker

env:
  DOCKER_COMPOSE_VERSION: 1.24.1

before_install:
  - sudo rm /usr/local/bin/docker-compose
  - curl -L https://github.com/docker/compose/releases/download/${DOCKER_COMPOSE_VERSION}/docker-compose-`uname -s`-`uname -m` > docker-compose
  - chmod +x docker-compose
  - sudo mv docker-compose /usr/local/bin

before_script:
  - export REACT360_SERVICE_URL=http://127.0.0.1
  - yarn install

script:
  - bash test.sh

To Get started with this project:

clone this repository or create a new repository on the command line

git clone

Contributors

1. Peter Kuria

[EOF]