Skip to content

Commit

Permalink
Add build & deploy instructions
Browse files Browse the repository at this point in the history
Summary: Add build & deploy instructions

Reviewed By: zjm-meta

Differential Revision:
D62666309

Privacy Context Container: L1188754

fbshipit-source-id: c55720b191f2322587c6979ea014c503d3719c96
  • Loading branch information
felixtrz authored and facebook-github-bot committed Sep 13, 2024
1 parent 6ef06b9 commit c4117b1
Showing 1 changed file with 41 additions and 4 deletions.
45 changes: 41 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<p align="center">
<img height="160px" src="./tutorial/assets/webxr-first-steps.png" />
<img src="./tutorial/assets/webxr-first-steps.png" style="max-width:376px"/>
</p>

Welcome to **WebXR First Steps**! This **2-hour** tutorial is designed to help you take your first steps into developing immersive WebXR experiences using [Three.js](https://threejs.org/). Whether you’re a web developer looking to expand your skillset or a hobbyist interested in creating virtual reality (VR) applications, this tutorial will guide you through the fundamentals of building interactive 3D worlds for the web.
Expand All @@ -8,7 +8,10 @@ Welcome to **WebXR First Steps**! This **2-hour** tutorial is designed to help y

By the end of this tutorial, you’ll have created a fully functional WebXR game where players can use VR controllers to shoot targets, track their score, and enjoy an immersive experience complete with sound, vibration, and smooth animations. Here's what the final experience looks like:

![Target Practice Gameplay](./tutorial/assets/targetpractice.gif)
<figure style="text-align: center;">
<img src="./tutorial/assets/targetpractice.gif" style="max-height:376px"/>
<figcaption>Target Practice Gameplay</figcaption>
</figure>

## Setting Up Your Local Development Environment

Expand Down Expand Up @@ -87,7 +90,10 @@ If you're already using the [Immersive Web Emulator browser extension](https://c

Here’s a showcase of the emulation setup in action:

![IWER & IWER/DevUI Showcase](./tutorial/assets/iwerdevui.gif)
<figure style="text-align: center;">
<img src="./tutorial/assets/iwerdevui.gif" style="max-height:376px"/>
<figcaption>IWER & IWER/DevUI Showcase</figcaption>
</figure>

## Getting Started

Expand All @@ -102,10 +108,41 @@ This tutorial is structured into chapters to help you progressively build your W

We hope you enjoy working through the tutorial. Happy coding, and have fun building your WebXR game!

## Build and Deploy

Once you've completed the development of your WebXR game, you can build and deploy it for others to experience. Here's how you can do that:

### Deploying the App with GitHub Pages

This repository includes a ready-to-use GitHub Actions workflow located at `.github/workflows/deploy.yml`, which automates both the build and deployment to GitHub Pages. Once enabled, every time you push changes to the `main` branch, a new build will automatically be deployed.

#### Steps to Enable GitHub Pages Deployment:

1. **Fork this repository** to your own GitHub account.
2. Navigate to your forked repository’s **Settings**.
3. Scroll down to the **Pages** section.
4. Under **Build and Deployment**, change the **Source** to **GitHub Actions**.

Once this is set, GitHub Actions will handle the build and deployment process automatically. Any time you push changes to the `main` branch, the app will be built and deployed to GitHub Pages without any additional manual steps.

You can monitor the status of the deployment job or manually re-run it via the **Actions** tab in your GitHub repository.

### Deploying to Your Own Hosting Solution

If you prefer to host the app yourself, you’ll need to manually build the app and then deploy the generated files to your hosting provider.

To generate the build, run the following command:

```bash
npm run build
```

This will create a `dist` folder containing the static files for the app. You can then upload these files to your hosting platform of choice.

## Contributing

Please read [CONTRIBUTING.md](./CONTRIBUTING.md) for details on how to contribute to the project.

## License

This project is licensed under the MIT License - see the [LICENSE.md](./LICENSE.md) file for details.
This project is licensed under the MIT License - see the [LICENSE.md](./LICENSE) file for details.

0 comments on commit c4117b1

Please sign in to comment.