npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sdk_examples

v1.0.0

Published

- [SDK Examples](#sdk-examples) - [Prerequisites](#prerequisites) - [Setup monorepo root](#setup-monorepo-root) - [Setup packages](#setup-packages) - [Run the inspector app](#run-the-inspector-app) - [Run the virtual staging app](#run-

Downloads

3

Readme

SDK Examples

Prerequisites

Your development environment will need node.js and yarn installed.

See https://nodejs.org/en/ and https://classic.yarnpkg.com/en/docs/install for installation instructions specific to your environment.

To run these examples, you will need to generate a sandboxed sdk key for your Matterport account. See Matterport Developer Tools Pricing and Availability.

The password for the beta versions of bundle: gOJKDpxNiMCtdlnXs

Setup monorepo root

Run these two commands when you first download the repo.

> yarn install
> yarn install-bundle
yarn run v1.22.4
$ yarn fetch-bundle && yarn expand-bundle
$ curl https://static.matterport.com/showcase-sdk/bundle/3.1.38.10-15-g5a5323ef0/showcase-bundle.zip -o bundle.zip
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 3108k  100 3108k    0     0  7599k      0 --:--:-- --:--:-- --:--:-- 7599k
$ unzip -o bundle.zip -d ./packages/bundle
Archive:  bundle.zip
 extracting: ./packages/bundle/version.txt
 ...

Setup packages

Call this to install or update the package dependencies. It also links local packages together.

> yarn bootstrap
yarn run v1.21.1
$ lerna bootstrap
lerna notice cli v3.3.2
lerna info Bootstrapping 4 packages
lerna info Installing external dependencies
lerna info Symlinking packages and binaries
lerna success Bootstrapped 4 packages
✨  Done in 20.58s.

Run the inspector app

> yarn inspector
yarn run v1.22.4
$ lerna run develop --scope=inspector --stream
lerna notice cli v3.3.2
lerna info filter [ 'inspector' ]
lerna info Executing command in 1 package: "yarn run develop"
inspector: warning package.json: "inspector" is also the name of a node core module
inspector: $ webpack-dev-server
inspector: ℹ 「wds」: Project is running at http://localhost:8000/
inspector: ℹ 「wds」: webpack output is served from /
inspector: ℹ 「wds」: Content not from webpack is served from /Users/bguillermo/projects/sdk_examples/packages/inspector

Run the virtual staging app

> yarn vs-app
yarn run v1.22.4
$ lerna run develop --scope=vs-app --stream
lerna notice cli v3.3.2
lerna info filter [ 'vs-app' ]
lerna info Executing command in 1 package: "yarn run develop"
vs-app: $ webpack-dev-server
vs-app: ℹ 「wds」: Project is running at http://localhost:8000/
vs-app: ℹ 「wds」: webpack output is served from /
vs-app: ℹ 「wds」: Content not from webpack is served from /Users/bguillermo/projects/sdk_examples/packages/vs-app

Run the magical bunny app

> yarn easter
yarn run v1.22.4
$ lerna run develop --scope=easter --stream
lerna notice cli v3.3.2
lerna info filter [ 'easter' ]
lerna info Executing command in 1 package: "yarn run develop"
easter: $ webpack-dev-server
easter: ℹ 「wds」: Project is running at http://localhost:8000/
easter: ℹ 「wds」: webpack output is served from /
easter: ℹ 「wds」: Content not from webpack is served from /Users/bguillermo/projects/sdk_examples/packages/easter

Run the remote control app

> yarn rc-app
yarn run v1.22.4
$ lerna run develop --scope=rc-app --stream
lerna notice cli v3.3.2
lerna info filter [ 'rc-app' ]
lerna info Executing command in 1 package: "yarn run develop"
rc-app: $ webpack-dev-server
rc-app: ℹ 「wds」: Project is running at http://localhost:8000/
rc-app: ℹ 「wds」: webpack output is served from /
rc-app: ℹ 「wds」: Content not from webpack is served from /Users/bguillermo/projects/sdk_examples/packages/rc-app

Run the embed sdk examples

> yarn embed-examples
yarn run v1.22.5
$ lerna run develop --scope=embed-examples --stream
lerna notice cli v3.22.1
lerna notice filter including "embed-examples"
lerna info filter [ 'embed-examples' ]
lerna info Executing command in 1 package: "yarn run develop"
embed-examples: warning package.json: No license field
embed-examples: $ webpack-dev-server
embed-examples: ℹ 「wds」: Project is running at http://localhost:8000/
embed-examples: ℹ 「wds」: webpack output is served from /
embed-examples: ℹ 「wds」: Content not from webpack is served from /Users/bguillermo/projects/sdk_examples/packages/embed-examples/dist

Clean packages

You will need to bootstrap after cleaning.

> yarn clean
yarn run v1.21.1
$ lerna clean --yes
lerna notice cli v3.3.2
lerna info clean removing /Users/bguillermo/projects/sdk_examples/packages/bundle/node_modules
lerna info clean removing /Users/bguillermo/projects/sdk_examples/packages/common/node_modules
lerna info clean removing /Users/bguillermo/projects/sdk_examples3/packages/core/node_modules
lerna info clean removing /Users/bguillermo/projects/sdk_examples3/packages/easter/node_modules
lerna info clean removing /Users/bguillermo/projects/sdk_examples2/packages/embed-examples/node_modules
lerna info clean removing /Users/bguillermo/projects/sdk_examples/packages/inspector/node_modules
lerna info clean removing /Users/bguillermo/projects/sdk_examples3/packages/rc-app/node_modules
lerna info clean removing /Users/bguillermo/projects/sdk_examples/packages/vs-app/node_modules
lerna success clean finished
✨  Done in 5.11s.

Make a prod build

> yarn build-all-prod
$ webpack --mode=production
Hash: 95bb160f191dc13eb410
Version: webpack 4.18.1
Time: 1029ms
...
lerna success run Ran npm script 'build-prod' in 5 packages:
lerna success - easter
lerna success - embed-examples
lerna success - inspector
lerna success - rc-app
lerna success - vs-app
✨  Done in 53.27s.

Packages

The repository is a Lerna monorepo with the following local packages:

vs-app

frameworks: Reactjs + SDK Bundle

  • virtual staging
  • local webcam
  • canvas
  • security camera

rc-app

frameworks: Reactjs + Photon SDK + SDK Embed

  • an example that shows how to build a remote controlled showcase

inspector

frameworks: Reactjs + RxJS + SDK Bundle

  • object placement using sdk scene files

easter

frameworks: Reactjs + Phaser + SDK Bundle

  • minigame

common

  • reusable sdk bundle components

core

  • matterport observable library

bundle

  • showcase sdk bundle

License

See the MATTERPORT SAMPLE SDK CODE LICENSE AGREEMENT file for license rights and limitations for this repository.