React + AFrame + TypeScript Boilerplate

Features:

• ReactJS: component architecture, virtual DOM and functional programming

• A-Frame: 3D scenes, Virtual Reality and WebGL (based in ThreeJS)

• TypeScript: provides a type system for JavaScript

• React Router: navigation between pages (3D scenes). AFrame library is loaded at the begining once, not at each page change. Using only AFrame and JavaScript without React-Router, all AFrame code must be loaded at each page.

• This project is based on create-react-app-typescript. Documentation (link)

  ​

Demo

• Mobile Simulator

• Full Screen

  ​

Installation, execution and build

• Clone or download the repository

• Using Yarn, run in the command line:

  # Install
  $ yarn add
  
  # Run
  $ yarn start
  
  # Build
  $ yarn build

• Using Npm:

  # Install
  $ npm install
  
  # Run
  $ npm start
  
  # Build
  $ npm build

Tests

• Testing Framework: Jest, Enzyme
• Methodologies:
  • Smoke Tests
  • Snapshot Tests
  • Live testing with BrowserStack

# yarn
$ yarn test

# npm
$ npm test

Code Coverage

• Report
• Run code-coverage script:

# yarn
$ yarn yarn_code_coverage

# npm: mutatis mutandi

Analysis of Dependencies

• Report
• Run analysis of dependencies script:

# yarn
$ yarn analize

# npm: mutatis mutandi

Back to top ↑