- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
If you are contributing to the codebase please know this:
- All issues are created within Jira and branched off the dev branch. If you see a branch prefixed with "AG-#", this is the issue key within Jira that identifies that particular feature or bug fix.
- While we adhere to and manage main branch features within Jira, you are free to add features for fixes outside the Jira enviroment within Github. Please only fork and work on the dev branch.
- When you contribute: Fork and clone the dev branch > Make your changes then push to dev.
AR Gallery is more than just a for AR. I have designed this application to accommodate basic image uploading, tagging, user account creation, and moderation, as well as other CMS and social features with a custom backend API. AR Gallery uses a comprehensive tech stack. At the minimum, you will need to install Vite, React, Node.js and Yarn
-
Vite (Vite + React) - https://vitejs.dev/
-
Node.js - https://nodejs.org
-
React - https://react.dev
-
Yarn - https://yarnpkg.com/
-
Express.js - https://expressjs.com/
-
Bootstrap - https://getbootstrap.com/docs/5.3/getting-started/introduction/
-
Uppy - https://uppy.io
-
Three.js - https://threejs.org/ (NYI)
-
Supabase - https://supabase.com
-
Solana (NYI) - https://solana.com
AR Gallery is a mono repo. The server and the front end are both within the root directory. To install all dependencies, you will need to run yarn install in both the app's root directory and also in the server directory.
Install VITE frontend using Yarn
This app has been designed around using the Yarn Package Manager. You will need Yarn.
Change the directory to the root of the application
cd ar-gallery
Install dependencies using Yarn. (Do not use NPM as this could cause potential conflicts)
yarn install
Run the VITE server using the --host flag. This allows the app to accept other network connections (Useful for testing on mobile devices on the same network for dev purposes)
yarn run dev --host
Security check
AR.js needs access to a device's camera, so HTTPS must be set up in order for the AR features to work.
Install backend Express.js server
The backend is built with Express.js and has endpoints setup out of the box.
Change the directory to the server dir.
cd server/
Run yarn install
yarn install
Run the backend server
node server.js
The backend has a default CORS policy set. You might need to make some changes to the CORS policy to ensure that you can allow requests from the frontend URL and not get a CORS block error.
The frontend and backend need HTTPS to test/use AR.js the backend needs to also be setup for HTTPS. You can generate your own self signed cert using:
openssl x509 -noout -text -in server.cert openssl rsa -noout -text -in server.key