https://github.com/Jon-Biz/simple-static-react-aframe

Minimal boilerplate and configuration for the development of static VR sites using aframe, react & es6
https://github.com/Jon-Biz/simple-static-react-aframe

Last synced: 4 months ago
JSON representation

Minimal boilerplate and configuration for the development of static VR sites using aframe, react & es6

• Host: GitHub
• URL: https://github.com/Jon-Biz/simple-static-react-aframe
• Owner: Jon-Biz
• License: mit
• Created: 2016-05-20T02:30:25.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2022-02-14T19:46:49.000Z (almost 3 years ago)
• Last Synced: 2024-06-22T19:42:26.945Z (6 months ago)
• Language: JavaScript
• Size: 79.1 KB
• Stars: 52
• Watchers: 8
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Simple Static React-Aframe

This repo is minimal boilerplate for VR sites written in React and Aframe. 

## 2/14/22 - It's also out of date, and appears not to be working in modern browsers. Pull requests welcome.

It is intended for to get you up and developing with a minimum of fuss and configuration for a static, single page React & Aframe site. This repo gives you:

- ES6/React (with sourcemaps)

- Aframe & React-Aframe

- CSS modules

- watchfile'd development builds

And that's it. 

You can see the initial output here:

http://elbizri.com/carpet/

The carpet and cube are created by the root component, so you can get quickly remove them. Sky, Earth, Camera and Cursor are all their own external components.

About React-Aframe:

Kevin Ngo's straight-forward wrapper React-Aframe

( https://github.com/ngokevin/aframe-react )

provides a React Components for Aframe's ``, `` and `` components. It should be pretty obvious from the code here how React Component `prop`s map to Aframe `components`. 

(You can still call the aframe's components directly if you want, but you'll need to stringify de-stringify the component arguments yourself - obviously this is not a bother for any static components.)

##Set up

Clone the repo and install the node dependencies.

```

git clone https://github.com/Jon-Biz/simple-static-react-aframe

cd simple-static-react-aframe

npm i

```

##Usage

###Development

Run the npm script `dev` to develop.

```

npm run dev

```

A webpack server will now be running on `4000`, serving the contents of the `public` directory. The `entry` files are in `src` - `index.js` and `style.css`.

NOTE: this is using webpack-dev-server, not actually overwriting the files in `public`. For that, you will need to run the build script.

###Production

Run the npm script 'build' to update `style.css` and `index.js` in the `public` directory. Upload this directory to your web server.

```

npm run build

```