CODEWITHSUNDEEP
8thwall-xr8thwall-web
rbkavin
rbkavin

Reputation: 69

how to code in Mac for 8thwall web ar and test it?

how to setup 8th wall project for web ar for Mac and use our system instead of using their web editor . I want to code in my computer and test and then upload that to their console rather then coding it in their web editor .

Upvotes: 1

Views: 1196

Answers (2)

ib95
ib95

Reputation: 129

You can develop locally by choosing self-hosted project option with 8thwall, then downloading 8thwall's own web repository to tinker with. I struggled with the 8thwall docs to figure this out but the web repository makes locally development pretty straight-forward.

Follow the steps on the getting started guide ,

  • firstly you'll need to create an 8thwall account and self-hosted project.
  • Copy your unique App Key from the project settings page.
  • Clone the source code from the repo, replacing the app key in index.html file with your own app key (this lives in the header of the html file) :

    <script async src="//apps.8thwall.com/xrweb?appKey=insert-your-key-here"></script>

  • 8thwall included a serve script, which serves your source code on local network over https. This means you can add your local URL as a trusted domain in your self-hosted project settings for testing.

  • you'll need to ensure Node.js and npm are installed to run the script

  • Using the serve script depends on your computer, (there's instructions here for Windows also) but for the case of Mac, open a terminal in your project directory :

    cd <to_this_serve_directory>

    npm install

    cd ..

    ./serve/bin/serve -d <sample_project_location>

I use Node version 16.16.0 as I had issues with my current node version 18.12.1. You can get Node version manager npm package to help manage your Node versions.

  • What's great about this is when you run the serve script from your terminal, this generates a QR code so you can test your app on a mobile device over local network. Make sure you copy the entire Listening URL into your browser, including the port number. e.g. https://245.678.0.11:8080
  • Final thing to mention, don't include the port number in your trusted domains URL. e.g. https://245.678.0.11

Upvotes: 0

Ambriel.AR
Ambriel.AR

Reputation: 31

Steps to locally develop 8thwall webAR without using 8th wall cloud editor

  1. Create a project using 8thwall dashboard and navigate to the dashboard settings and copy the appkey.
  2. copy this base glitch get-started project and replace the appkey with your project appkey.
  3. Navigate back to the dashboard and authorize your browser with the help of the dev-token.
  4. You are ready to now use and test 8thwall development locally.
  5. You can later self-host the project instead of copy pasting the code and reformatting according to the 8thwall cloud editor.

You can also directly remix any of the glitch projects as well which is a much quicker option.

NOTE: The glitch projects are under-maintained hence refer docs for latest SDK version as well as syntax changes

Upvotes: 0

Related Questions