3

Any and all help will be much appreciated.

I've been trying to deploy to Heroku with all day. I'm using Vite locally to develop, so I figured I'd try to deploy with that too. Everything works locally (of course) and the build is successful when I deploy the repository. However, when I try to view my app, I get the following:

2021-10-05T02:12:13.493958+00:00 heroku[web.1]: Starting process with command `npm start`
2021-10-05T02:12:14.624236+00:00 app[web.1]: [heroku-exec] Starting
2021-10-05T02:12:14.834583+00:00 app[web.1]: 
2021-10-05T02:12:14.834585+00:00 app[web.1]: > dashboard-frontend@0.0.0 start /app
2021-10-05T02:12:14.834585+00:00 app[web.1]: > vite
2021-10-05T02:12:14.834585+00:00 app[web.1]: 
2021-10-05T02:12:15.759365+00:00 app[web.1]: Pre-bundling dependencies:
2021-10-05T02:12:15.759384+00:00 app[web.1]:   vue
2021-10-05T02:12:15.759384+00:00 app[web.1]:   vue-chart-3
2021-10-05T02:12:15.759385+00:00 app[web.1]:   axios
2021-10-05T02:12:15.759389+00:00 app[web.1]: (this will be run only when your dependencies or config have changed)
2021-10-05T02:12:16.402419+00:00 app[web.1]: 
2021-10-05T02:12:16.402429+00:00 app[web.1]:   vite v2.5.5 dev server running at:
2021-10-05T02:12:16.402429+00:00 app[web.1]: 
2021-10-05T02:12:16.402543+00:00 app[web.1]:   > Local: http://localhost:3000/
2021-10-05T02:12:16.402578+00:00 app[web.1]:   > Network: use `--host` to expose
2021-10-05T02:12:16.402610+00:00 app[web.1]: 
2021-10-05T02:12:16.402611+00:00 app[web.1]:   ready in 1529ms.
2021-10-05T02:12:16.402611+00:00 app[web.1]: 
2021-10-05T02:12:16.000000+00:00 app[api]: Build succeeded
2021-10-05T02:13:14.120863+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2021-10-05T02:13:14.233876+00:00 heroku[web.1]: Stopping process with SIGKILL
2021-10-05T02:13:14.376928+00:00 heroku[web.1]: Process exited with status 137
2021-10-05T02:13:14.423585+00:00 heroku[web.1]: State changed from starting to crashed
2021-10-05T02:13:15.030060+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=indicatorsdashboardfrontend.herokuapp.com request_id=c9ad1cae-2b32-4e54-bab1-7919401af71c fwd="98.209.145.237" dyno= connect= service= status=503 bytes= protocol=https

I read a post here that said that I needed to set some variables so that Vite would install properly and I believe I did that:

       NPM_CONFIG_PRODUCTION=false
       NPM_CONFIG_LOGLEVEL=error
       YARN_PRODUCTION=false
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true

My repository can be found here: https://github.com/kddove85/IndicatorDashboardFrontend

I think the important file is the package.json but I'm not sure. Here that is:

{
  "name": "dashboard-frontend",
  "version": "0.0.0",
  "scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "@vue/cli": "^4.5.13",
    "axios": "^0.21.4",
    "chart.js": "^2.9.4",
    "lodash": "^4.17.21",
    "vue": "^3.2.6",
    "vue-axios": "^3.3.6",
    "vue-chart-3": "^0.5.8"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.6.1",
    "@vue/compiler-sfc": "^3.2.6",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^7.18.0",
    "vite": "^2.5.4"
  },
  "engines": {
    "node": "14.17.5",
    "npm": "6.14.14"
  }
}

I'm just not sure what I did wrong.

Kyle Dove
  • 31
  • 3

2 Answers2

7

I found this thread and was also struggling with this issue. For those that come here and cannot figure it out, this is what I found and what worked for me.

If you only have a vite project, you should deploy it as a static site. There is some documentation on the Vite website. Basically, it comes down to making sure you have the right buildpacks (at least my problem came down to that).

First, determine how your website is going to be hosted. Are you relying on heroku to also build your dist folder or are you doing that before you push your branch? If you are not relying on heroku to build your site, you can follow along from step 2.

If you want heroku to build your website before serving it, you should have the heroku/nodejs buildpack set as the first buildpack.

  1. You can do this by running the following cli command:
heroku buildpacks:set heroku/nodejs -a <your-app-name>

This will remove any previously set buildpacks and set the heroku/nodejs buildpack as the only buildpack to run.

  1. Then you need to make sure that once your app has been built, it hosts your dist folder as a static site. You do that by adding a second buildpack:
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static.git -a <your-app-name>

This will make sure that your app is treated as a static page rather than a node js application.

  1. You need to set some configurations in your app to make sure the buildpacks take the correct files. For this, add a file to the root of your Vite project called static.json. Put the following json in there:
{
  "root": "./dist",
  "clean_urls": true,
  "routes": {
    "/**": "index.html"
  }
}
  1. Push your code to your preferred platform and make sure your heroku app deploys it. I have my project on Github and set up automatic deploys from the correct branch.
Other points

A few other points that could be of interest.

  • My heroku app has a NODE_ENV=production environment variable set
  • I didn't need to add any scripts. Just as a reference, this is what my package.json scripts look like:
{
  ...
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "serve": "vite preview"
  },
  ...
}
Robin G
  • 97
  • 1
  • 9
0

Try adding --port $PORT to your start script. It should look like this:

"start": "vite --port $PORT"

I was facing the same issue and that is what worked for me.

This stackoverflow answer helped me figure it out.

I hope it works for you.

Ray
  • 93
  • 9