Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PF-1489 - Adding selfie app example #197

Merged
merged 6 commits into from
Sep 25, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions examples/selfie/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js
.next

# testing
/coverage

# misc
.DS_Store
*.pem
.idea

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env
dist
5 changes: 5 additions & 0 deletions examples/selfie/APP_SUBMISSION.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
## Submission to Miro Marketplace

Congrats! You have finished building your app & you'd like to publish it for
users. You can submit your app on the
[Miro Marketplace](https://developers.miro.com/docs/submit-your-app) for review.
54 changes: 54 additions & 0 deletions examples/selfie/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
## Self Image
fredcido marked this conversation as resolved.
Show resolved Hide resolved

** ℹ Note**:

- We recommend a Chromium-based web browser for local development with HTTP. \
Safari enforces HTTPS; therefore, it doesn't allow localhost through HTTP.
- For more information, visit our [developer documentation](https://developers.miro.com).

### How to start locally

- Run `npm i` to install dependencies.
- Run `npm start` to start developing. \
Your URL should be similar to this example:

```
http://localhost:3000
```

- Paste the URL under **App URL** in your
[app settings](https://developers.miro.com/docs/build-your-first-hello-world-app#step-3-configure-your-app-in-miro).
- Open a board; you should see your app in the app toolbar or in the **Apps**
panel.

### How to build the app

- Run `npm run build`. \
This generates a static output inside [`dist/`](./dist), which you can host on a static hosting
service.

### Folder structure

<!-- The following tree structure is just an example -->

```
.
├── src
│ ├── assets
│ │ └── style.css
│ ├── app.tsx // The code for the app lives here
│ └── index.ts // The code for the app entry point lives here
├── app.html // The app itself. It's loaded on the board inside the 'appContainer'
└── index.html // The app entry point. This is what you specify in the 'App URL' box in the Miro app settings
```

### About the app

This sample app provides you with boilerplate setup and configuration that you can further customize to build your own app.

<!-- describe shortly the purpose of the sample app -->

Built using [`create-miro-app`](https://www.npmjs.com/package/create-miro-app).

This app uses [Vite](https://vitejs.dev/). \
If you want to modify the `vite.config.js` configuration, see the [Vite documentation](https://vitejs.dev/guide/).
15 changes: 15 additions & 0 deletions examples/selfie/capture.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/src/assets/style.css" />
<script src="https://miro.com/app/static/sdk/v2/miro.js"></script>
<title>Self Image</title>
</head>
<body>
<div id="root"></div>

<script type="module" src="/src/app.tsx"></script>
</body>
</html>
2 changes: 2 additions & 0 deletions examples/selfie/global.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
// https://vitejs.dev/guide/features.html#typescript-compiler-options
/// <reference types="vite/client" />
12 changes: 12 additions & 0 deletions examples/selfie/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://miro.com/app/static/sdk/v2/miro.js"></script>
<title>Self Image</title>
</head>
<body>
<script type="module" src="/src/index.ts"></script>
</body>
</html>
Loading
Loading