Deploying Viewer-sandbox

Help Developers
1

Hi all,

I’m trying to deploy a small app I made on top of viewer sandbox to Heroku, yet every time I try to build it fails. I suspect it’s caused by the wrong “procfile” since it works with “Vite”.

Is anybody here having experience on the topic or any suggestion on how to deploy the Speckle viewer sandbox?

REALLY appreciate it :slight_smile:

just in case this is what I have in package.json:

{
  "name": "@speckle/viewer-sandbox",
  "private": true,
  "version": "2.5.4",
  "description": "Sandbox for testing, debugging & developing the viewer package",
  "homepage": "https://speckle.systems",
  "repository": {
    "type": "git",
    "url": "https://github.com/specklesystems/speckle-server.git",
    "directory": "packages/viewer"
  },
  "engines": {
    "node": "18.x",
    "yarn": "1.22.x",
    "npm": "8.17.x"
  },
  "author": "AEC Systems",
  "license": "Apache-2.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .js,.ts",
    "lint:tsc": "tsc --noEmit",
    "postinstall": "npm run build",
    "serve-heroku": "vite --host 0.0.0.0 --port $PORT preview"
  },
  "dependencies": {
    "@speckle/viewer": "^2.11.4",
    "@tiptap/core@": "^2.0.0-beta.209",
    "newrelic": "^9.8.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.39.0",
    "@typescript-eslint/parser": "^5.39.0",
    "eslint": "^8.11.0",
    "eslint-config-prettier": "^8.5.0",
    "typescript": "^4.5.4",
    "vite": "^2.9.13"
  }
}

and what I’ve tried in procfile:
1 - web: yarn dev
2 - web: npm start
3 - …

Best,
Ashkan

2

Hi @ashdotio, I don’t have much experience with Heroku, but you might need to have an npm install or yarn install in there as well?

I’m going to rope in @fabians or @gjedlicska as well, but maybe @alex will have some hints!

AFAIK, you’d need to build the sandbox-derived app, and then serve it statically from heroku. No clue though on how to achieve this :smiley: Maybe this helps?

1 Like
3

Hey,

I’m not the biggest Heroku expert either, but given this tutorial and the state where you are right now, you are fairly close to the solution. There are some tricks in the tutorial that you’ve already added, can you try setting the procfile up as they do?

If it still fails, pls include an error log, so we can examine the error.

And an extra thought, on the Vite docs site, it lists a few easy to use deployment mechanism, many of which have free entry tiers. You might want to give one of them a try.

1 Like
4

Thanks, @dimitrie and @gjedlicska! Another solution that I thought you might know its roundabout is, how and where would you deploy a sand-box project except Heroku? I tested Netlify and It seems not to work either.

Here are my Heroku logs:

2023-01-25T08:53:01.832492+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2023-01-25T08:53:01.832584+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2023-01-25T08_53_01_764Z-debug-0.log
2023-01-25T08:53:01.956891+00:00 heroku[web.1]: Process exited with status 1
2023-01-25T08:53:02.015495+00:00 heroku[web.1]: State changed from starting to crashed
2023-01-25T09:09:28.000000+00:00 app[api]: Build started by user aashkanrezaee@gmail.com
2023-01-25T09:09:28.000000+00:00 app[api]: Build started by user aashkanrezaee@gmail.com
2023-01-25T09:09:35.000000+00:00 app[api]: Build failed -- check your build output: https://dashboard.heroku.com/apps/d4b516eb-08b4-420c-b3d9-08055d053eae/activity/builds/84622233-07a6-4eed-a28c-d258bccee934
2023-01-25T09:15:12.000000+00:00 app[api]: Build started by user aashkanrezaee@gmail.com
2023-01-25T09:16:26.180852+00:00 app[api]: Deploy 12c1dcf6 by user aashkanrezaee@gmail.com
2023-01-25T09:16:26.180852+00:00 app[api]: Release v38 created by user aashkanrezaee@gmail.com
2023-01-25T09:16:27.430538+00:00 heroku[web.1]: State changed from crashed to starting
2023-01-25T09:16:31.521867+00:00 heroku[web.1]: Starting process with command `npm run serve-heroku`
2023-01-25T09:16:33.455544+00:00 app[web.1]:
2023-01-25T09:16:33.455564+00:00 app[web.1]: > @speckle/viewer-sandbox@2.5.4 serve-heroku
2023-01-25T09:16:33.455565+00:00 app[web.1]: > vite --host 0.0.0.0 --port $PORT preview
2023-01-25T09:16:33.455565+00:00 app[web.1]:
2023-01-25T09:16:33.461382+00:00 app[web.1]: sh: 1: vite: not found
2023-01-25T09:16:33.591904+00:00 heroku[web.1]: Process exited with status 127
2023-01-25T09:16:33.664866+00:00 heroku[web.1]: State changed from starting to crashed
2023-01-25T09:16:33.667664+00:00 heroku[web.1]: State changed from crashed to starting
2023-01-25T09:16:38.769994+00:00 heroku[web.1]: Starting process with command `npm run serve-heroku`
2023-01-25T09:16:41.639228+00:00 app[web.1]:
2023-01-25T09:16:41.639260+00:00 app[web.1]: > @speckle/viewer-sandbox@2.5.4 serve-heroku
2023-01-25T09:16:41.639260+00:00 app[web.1]: > vite --host 0.0.0.0 --port $PORT preview
2023-01-25T09:16:41.639261+00:00 app[web.1]:
2023-01-25T09:16:41.723263+00:00 app[web.1]: sh: 1: vite: not found
2023-01-25T09:16:41.922666+00:00 heroku[web.1]: Process exited with status 127
2023-01-25T09:16:42.000845+00:00 heroku[web.1]: State changed from starting to crashed
2023-01-25T09:16:53.000000+00:00 app[api]: Build succeeded
2023-01-25T09:17:08.034822+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=hldecarb.herokuapp.com request_id=696db975-f4fb-41aa-84f9-ff61b1fb7af0 fwd="195.137.178.130" dyno= connect= service= status=503 bytes= protocol=https
2023-01-25T09:17:08.440841+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=hldecarb.herokuapp.com request_id=109460ab-2750-4512-93a6-dd1d52ede6ca fwd="195.137.178.130" dyno= connect= service= status=503 bytes= protocol=https
2023-01-25T09:23:28.000000+00:00 app[api]: Build started by user aashkanrezaee@gmail.com
2023-01-25T09:24:29.910323+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=hldecarb.herokuapp.com request_id=60af3c4e-c7cd-42e5-9e00-eb833929e427 fwd="195.137.178.130" dyno= connect= service= status=503 bytes= protocol=https
2023-01-25T09:24:30.352674+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=hldecarb.herokuapp.com request_id=b561537b-ad2b-4a15-978c-a44b0beb74d3 fwd="195.137.178.130" dyno= connect= service= status=503 bytes= protocol=https
2023-01-25T09:24:32.842556+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=hldecarb.herokuapp.com request_id=7b725edb-7473-4fb0-9865-27f8b818fb25 fwd="195.137.178.130" dyno= connect= service= status=503 bytes= protocol=https
2023-01-25T09:24:32.969034+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=hldecarb.herokuapp.com request_id=b9974aff-7f24-489a-b91b-f01082d3c843 fwd="195.137.178.130" dyno= connect= service= status=503 bytes= protocol=https
2023-01-25T09:24:34.780235+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=hldecarb.herokuapp.com request_id=628fda3d-bd19-4e45-875c-5e35b8a88179 fwd="195.137.178.130" dyno= connect= service= status=503 bytes= protocol=https
2023-01-25T09:24:34.872485+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=hldecarb.herokuapp.com request_id=76c5862c-c4e3-4d0d-9448-514cb834f566 fwd="195.137.178.130" dyno= connect= service= status=503 bytes= protocol=https
2023-01-25T09:24:35.628873+00:00 app[api]: Deploy 7dd74f64 by user aashkanrezaee@gmail.com
2023-01-25T09:24:35.628873+00:00 app[api]: Release v39 created by user aashkanrezaee@gmail.com
2023-01-25T09:24:36.875057+00:00 heroku[web.1]: State changed from crashed to starting
2023-01-25T09:24:37.291609+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=hldecarb.herokuapp.com request_id=b4931f9f-2c8e-484d-b626-2302bb1a8780 fwd="195.137.178.130" dyno= connect= service= status=503 bytes= protocol=https
2023-01-25T09:24:41.258080+00:00 heroku[web.1]: Starting process with command `npm run serve-heroku`
2023-01-25T09:24:43.355777+00:00 app[web.1]:
2023-01-25T09:24:43.355806+00:00 app[web.1]: > @speckle/viewer-sandbox@2.5.4 serve-heroku
2023-01-25T09:24:43.355806+00:00 app[web.1]: > vite --host 0.0.0.0 --port $PORT preview
2023-01-25T09:24:43.355806+00:00 app[web.1]:
2023-01-25T09:24:43.361485+00:00 app[web.1]: sh: 1: vite: not found
2023-01-25T09:24:43.522480+00:00 heroku[web.1]: Process exited with status 127
2023-01-25T09:24:43.586697+00:00 heroku[web.1]: State changed from starting to crashed
2023-01-25T09:24:44.701123+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=hldecarb.herokuapp.com request_id=fe492799-7f15-438b-98a0-103ec1918c0d fwd="195.137.178.130" dyno= connect= service= status=503 bytes= protocol=https
2023-01-25T09:24:44.842991+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=hldecarb.herokuapp.com request_id=2b0ffcb0-accc-4efb-b77a-c099f6928d32 fwd="195.137.178.130" dyno= connect= service= status=503 bytes= protocol=https
2023-01-25T09:24:45.370927+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=hldecarb.herokuapp.com request_id=cf38f151-3299-4bf7-986a-adaad783f182 fwd="195.137.178.130" dyno= connect= service= status=503 bytes= protocol=https
2023-01-25T09:24:58.000000+00:00 app[api]: Build succeeded
2023-01-25T09:25:03.334818+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=hldecarb.herokuapp.com request_id=d375d9f3-c43a-45aa-a3be-f06419e4de26 fwd="195.137.178.130" dyno= connect= service= status=503 bytes= protocol=https
2023-01-25T09:25:03.421017+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=hldecarb.herokuapp.com request_id=ce82709b-88a9-4376-b638-4504a50ac772 fwd="195.137.178.130" dyno= connect= service= status=503 bytes= protocol=https
2023-01-25T09:28:08.371709+00:00 heroku[web.1]: State changed from crashed to starting
2023-01-25T09:28:12.652882+00:00 heroku[web.1]: Starting process with command `npm run serve-heroku`
2023-01-25T09:28:14.763392+00:00 app[web.1]:
2023-01-25T09:28:14.763414+00:00 app[web.1]: > @speckle/viewer-sandbox@2.5.4 serve-heroku
2023-01-25T09:28:14.763414+00:00 app[web.1]: > vite --host 0.0.0.0 --port $PORT preview
2023-01-25T09:28:14.763414+00:00 app[web.1]:
2023-01-25T09:28:14.769628+00:00 app[web.1]: sh: 1: vite: not found
2023-01-25T09:28:14.919156+00:00 heroku[web.1]: Process exited with status 127
2023-01-25T09:28:14.990390+00:00 heroku[web.1]: State changed from starting to crashed
2023-01-25T09:50:12.606071+00:00 heroku[web.1]: State changed from crashed to starting
2023-01-25T09:50:17.373486+00:00 heroku[web.1]: Starting process with command `npm run serve-heroku`
2023-01-25T09:50:20.211902+00:00 app[web.1]:
2023-01-25T09:50:20.211933+00:00 app[web.1]: > @speckle/viewer-sandbox@2.5.4 serve-heroku
2023-01-25T09:50:20.211934+00:00 app[web.1]: > vite --host 0.0.0.0 --port $PORT preview
2023-01-25T09:50:20.211934+00:00 app[web.1]:
2023-01-25T09:50:20.222336+00:00 app[web.1]: sh: 1: vite: not found
2023-01-25T09:50:20.377808+00:00 heroku[web.1]: Process exited with status 127
2023-01-25T09:50:20.435894+00:00 heroku[web.1]: State changed from starting to crashed
2023-01-25T10:30:16.000000+00:00 app[api]: Build started by user aashkanrezaee@gmail.com
2023-01-25T10:31:34.804094+00:00 app[api]: Deploy 1f99e8db by user aashkanrezaee@gmail.com
2023-01-25T10:31:34.804094+00:00 app[api]: Release v40 created by user aashkanrezaee@gmail.com
2023-01-25T10:31:36.038577+00:00 heroku[web.1]: State changed from crashed to starting
2023-01-25T10:31:41.400148+00:00 heroku[web.1]: Starting process with command `npm run serve-heroku`
2023-01-25T10:31:44.787330+00:00 app[web.1]:
2023-01-25T10:31:44.787356+00:00 app[web.1]: > @speckle/viewer-sandbox@2.5.4 serve-heroku
2023-01-25T10:31:44.787356+00:00 app[web.1]: > vite --host 0.0.0.0 --port $PORT preview
2023-01-25T10:31:44.787356+00:00 app[web.1]:
2023-01-25T10:31:44.801297+00:00 app[web.1]: sh: 1: vite: not found
2023-01-25T10:31:44.972397+00:00 heroku[web.1]: Process exited with status 127
2023-01-25T10:31:45.037771+00:00 heroku[web.1]: State changed from starting to crashed
2023-01-25T10:31:45.040745+00:00 heroku[web.1]: State changed from crashed to starting
2023-01-25T10:31:48.913688+00:00 heroku[web.1]: Starting process with command `npm run serve-heroku`
2023-01-25T10:31:51.315891+00:00 app[web.1]:
2023-01-25T10:31:51.315923+00:00 app[web.1]: > @speckle/viewer-sandbox@2.5.4 serve-heroku
2023-01-25T10:31:51.315923+00:00 app[web.1]: > vite --host 0.0.0.0 --port $PORT preview
2023-01-25T10:31:51.315923+00:00 app[web.1]:
2023-01-25T10:31:51.320945+00:00 app[web.1]: sh: 1: vite: not found
2023-01-25T10:31:51.445586+00:00 heroku[web.1]: Process exited with status 127
2023-01-25T10:31:51.514791+00:00 heroku[web.1]: State changed from starting to crashed
2023-01-25T10:32:02.000000+00:00 app[api]: Build succeeded
2023-01-25T10:32:38.035047+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=hldecarb.herokuapp.com request_id=0f130e3a-e99f-45a5-b039-7d211eb6caae fwd="195.137.178.130" dyno= connect= service= status=503 bytes= protocol=https
2023-01-25T10:32:38.351659+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=hldecarb.herokuapp.com request_id=bfa18e8f-a117-4194-912a-9bddfb47809b fwd="195.137.178.130" dyno= connect= service= status=503 bytes= protocol=https
2023-01-25T10:51:50.835986+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=hldecarb.herokuapp.com request_id=218090d9-5fdf-4e98-a35d-1e9abe4c2046 fwd="195.137.178.130" dyno= connect= service= status=503 bytes= protocol=https
2023-01-25T10:51:51.277338+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=hldecarb.herokuapp.com request_id=2d2889f5-74f5-42c8-9728-c7b222fd3cd6 fwd="195.137.178.130" dyno= connect= service= status=503 bytes= protocol=https
5

I don’t know much about Heroku either, but apparently it’s not installing all of the required node dependencies. vite is clearly listed under devDependencies and yet it’s not available. Maybe it’s only installing dependencies skipping the dev ones?

It probably doesn’t work out of the box because speckle-server is a monorepo and thus not as simple to build as standard node repositories

2 Likes
6

@fabians Thanks. Nice observation. It works like charm now. :slight_smile:

Best,
Ashkan

2 Likes
7

You know, we’re very curious about what you built. If you can share with us, we can offer stickers in return?

3 Likes
8

I am curious.

Cat Kitten GIF

2 Likes
9

Oh It was probably that to run the app you also need vite, which is a devDependency. We’ve never had to actually deploy a build of viewer-sandbox anywhere, which is why we hadn’t noticed that issue.

You should be able to run the build without vite tho, vite preview is just a shortcut that runs a simple server with the build.

1 Like
10

I love stickers :slight_smile: I’ll update you shortly when other small bugs are fixed.

And again thank all of you for being helpful and cool.

2 Likes
11

That’s what I was expecting to happen. And I was hoping to use as few dependencies as possible. Thanks again for noticing the problem :slight_smile:

1 Like