Skip to content
/ exeudvr-canister Public template
generated from willguest/vite-react-motoko

Web3 template for deploying ExeuδVR experiences to the Internet Computer

Notifications You must be signed in to change notification settings

Exeud/exeudvr-canister

Repository files navigation

ExeuδVR Canister Template

This is a template for deploying immersive experiences on the Internet Computer, configured for use with the ExeuδVR Unity toolkit.

🔰 Overview

This project connects Unity's C# functionality (user interaction) to TypeScript interfaces and functions, enabling authentication and message signing from Unity to the Internet Computer. This project aims to be widely compatible, facilitating many flavours of immersive experience on the Internet Computer. It is built with:

  • TypeScript everywhere, but with JavaScript compatibility.
  • Node.js: Easily add JavaScript packages to extend functionality.
  • Rust: Add crates with Cargo.
  • Motoko: Connects to the mops package manager, for Web 3.0 functionality.
  <React.StrictMode>
    <BrowserRouter>
      <AuthProvider>
        <UnityProvider>
          <App />
        </UnityProvider>
      </AuthProvider>
    </BrowserRouter>
  </React.StrictMode>

This repo uses Internet Identity, a WebAuthn solution configured for the Internet Computer. The implementation provides a secure context to pass messages to the blockchain, enabling crypto transactions and secure messaging, from inside Unity.

📦 Creating a New Project

0️⃣ If necessary, install Node.js v20.X and dfx v0.22.0.

nvm install 20
dfxvm install 0.22.0

1️⃣ From a new, empty project folder, import this template.

npx degit Exeud/exeudvr-canister

2️⃣ Open this folder in your favourite code editor and, if using Windows, connect to WSL.

3️⃣ Copy the files from the 'Build' folder of your Unity project to src/assets/build.

4️⃣ Run the following NPM scripts, from either the panel in the sidebar or the command line:

npm run setup # Install packages and create canisters.
npm run build # Compile ts files and build the webpack.
npm run start # Deploy canisters locally.

✔️ You can then open a new browser window at the location prompted by the terminal. The default is bkyz2-fma...

http://127.0.0.1:4943/?canisterId=<local-canister-id>

When ready, run dfx deploy --network ic to deploy your experience to the Internet Computer.

🛠️ Technology Stack

  • ExeudVR: Interactive, immersive Unity toolkit.
  • React: a component-based UI library
  • TypeScript: JavaScript extended with syntax for types =======

Vite + React + Motoko

Get started directly in your browser:

Open in Gitpod

This template gives you everything you need to build a full-stack Web3 application on the Internet Computer.

For an example of a real-world dapp built using this starter project, check out the source code for DFINITY's Developer Experience Feedback Board.

📦 Create a New Project

Make sure that Node.js >= 16 and dfx >= 0.14 are installed on your system.

Run the following commands in a new, empty project directory:

npx degit rvanasa/vite-react-motoko # Download this starter project
dfx start --clean --background # Run dfx in the background
npm run setup # Install packages, deploy canisters, and generate type bindings

npm start # Start the development server

When ready, run dfx deploy --network ic to deploy your application to the Internet Computer.

🛠️ Technology Stack

  • Vite: high-performance tooling for front-end web development
  • React: a component-based UI library
  • TypeScript: JavaScript extended with syntax for types
  • Sass: an extended syntax for CSS stylesheets
  • Prettier: code formatting for a wide range of supported languages
  • Motoko: a safe and simple programming language for the Internet Computer
  • Mops: an on-chain community package manager for Motoko
  • mo-dev: a live reload development server for Motoko

📚 Documentation

💡 Tips and Tricks

  • Reduce the latency of update calls by passing the --emulator flag to dfx start.
  • Install a Motoko package by running npx ic-mops add <package-name>. Here is a list of available packages.
  • Split your frontend and backend console output by running npm run frontend and npm run backend in separate terminals.

🙏 Acknowledgements

Thanks to DFINTY for building out the Internet Computer.

Thanks to Ryan Vandersmith for the original vite-react-motoko template, on which this is based.