M2 Docs

Appearance

Return to top
On this page

Deployment Vite Plugin SSR to Heroku

Assumptions

  • You have a Vite SSR app that is using the Vite SSR Plugin
  • You have a Heroku account
  • You have the Heroku CLI installed
  • You've copied the boilerplate Vite SSR app (apps/vite-ssr-app) to apps/m2-site-vps directory
  • You've named the copied Vite SSR app m2-site-vps in the apps/m2-site-vps/package.json file

Preparing the Repo and Vite SSR App

To deploy to Heroku we'll need to prepare the repository and the Vite SSR app so that it can be deployed to Heroku.

We'll need to add a custom Procfile to the root directory of the repository. The Procfile will tell Heroku how to run the Vite SSR app.

We'll also need to add a custom script entries to the package.json file of project root. The custom script etnries will be used to build the app and run it using the Procfile.

  1. Add a Procfile to the root directory of the repository

    1.1. Create a new file named Procfile in the root directory of the repository

    Note the capital P in Procfile. This is important.

    1.2. Add the following content to the Procfile:

    bash
    web: yarn start-heroku-site

    1.3. Save the Procfile

  2. Add a custom script to the package.json file of project root

    2.1. Open the package.json file of project root

    2.2. Add the following content to the scripts object:

    json
    "heroku-postbuild": "yarn build --filter m2-site-vps...",
"start-heroku-site": "cd apps/m2-site-vps && yarn dev"

    "heroku-postbuild" is a special script that Heroku will run instead of the build. We'll use this script to build the Vite SSR app.

    "start-heroku-site" is a custom script that we'll use to run the Vite SSR app. We'll use this script in the Procfile to tell Heroku how to run the Vite SSR app.

    2.3. Save the package.json file

  3. Commit the changes and push to your repository/branch

Deploying to Heroku

  1. Create a new Heroku app

Heroku Create App

  1. Add a new buildpack: heroku/nodejs

    2.1. Click on Settings tab

    Heroku Settings

    2.2. Scroll down to Buildpacks section and click Add buildpack

    Heroku Add Buildpack

    2.3. Select heroku/nodejs from selection options or type it in the input box, and click Save changes

    Heroku NodeJS Buildpack

    You should now have a buildpack added to your Heroku app.

    Heroku Buildpacks

  2. Create Deployment using Github

    3.1. Click on Deploy tab

    3.2. Scroll down to Deployment method section and click Connect to Github

    Heroku Deploy

    3.3. Select your Github repository and click Connect

    Heroku Connect to Github

    You should now have your Github repository connected to your Heroku app.

    Heroku Github Connected

    3.4. Scroll down to Manual deploy section, select the desired branch you'd like to deploy, and click Deploy Branch

    Heroku Deploy Branch

    You can also enable automatic deploys by clicking Enable Automatic Deploys button for the desired branch.

    You should keep an eye on the build progress by navigating to Activity tab and watching the logs of the latest build.

    Heroku Activity

    If everything went according to plan, heroku should now be building your app.

    Heroku Deploying

    After the build is complete, you should see a message that says Your app was successfully deployed.

    Heroku Deployed

Issues

Cannot get /

If you see a Cannot get / error when you visit your Heroku app, it means that the app is not running. You can check the logs to see what's going on.

Heroku Cannot Get

  1. In terminal window type heroku logs -a --tail which will begin streaming the logs from your Heroku app.

    Replace with the name of your Heroku app.

Heroku Logs

  1. You should see something like this:

    bash
    2023-03-04T14:42:40.768169+00:00 app[api]: Release v3 created by user e********@gmail.com
2023-03-04T14:42:40.786771+00:00 app[api]: Scaled to web@1:Basic by user e********@gmail.com
2023-03-04T14:43:05.502291+00:00 heroku[web.1]: Starting process with command `yarn start-site`
2023-03-04T14:43:07.247285+00:00 app[web.1]: yarn run v1.22.19
2023-03-04T14:43:07.286038+00:00 app[web.1]: $ cd apps/m2-site-vps && yarn server:prod
2023-03-04T14:43:07.664033+00:00 app[web.1]: $ cross-env NODE_ENV=production ts-node ./server
2023-03-04T14:43:08.497179+00:00 app[web.1]: Server running at http://localhost:7737
2023-03-04T14:43:08.610082+00:00 heroku[web.1]: State changed from starting to up
2023-03-04T14:43:54.561469+00:00 app[web.1]: Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/app/node_modules/react-icons/ri' is not supported resolving ES modules imported from /app/apps/m2-site-vps/dist/server/assets/index.page.6ed9ea56.js
2023-03-04T14:43:54.561499+00:00 app[web.1]: Did you mean to import react-icons/ri/index.js?
2023-03-04T14:43:54.561500+00:00 app[web.1]: at new NodeError (node:internal/errors:387:5)
2023-03-04T14:43:54.561500+00:00 app[web.1]: at finalizeResolution (node:internal/modules/esm/resolve:326:17)
2023-03-04T14:43:54.561500+00:00 app[web.1]: at moduleResolve (node:internal/modules/esm/resolve:907:10)
2023-03-04T14:43:54.561500+00:00 app[web.1]: at defaultResolve (node:internal/modules/esm/resolve:1115:11)
2023-03-04T14:43:54.561501+00:00 app[web.1]: at nextResolve (node:internal/modules/esm/loader:163:28)
2023-03-04T14:43:54.561501+00:00 app[web.1]: at ESMLoader.resolve (node:internal/modules/esm/loader:841:30)
2023-03-04T14:43:54.561502+00:00 app[web.1]: at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
2023-03-04T14:43:54.561502+00:00 app[web.1]: at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
2023-03-04T14:43:54.561502+00:00 app[web.1]: at link (node:internal/modules/esm/module_job:75:36)
2023-03-04T14:43:54.576185+00:00 app[web.1]: Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/app/node_modules/react-icons/ri' is not supported resolving ES modules imported from /app/apps/m2-site-vps/dist/server/assets/_default.page.server.a3234b5f.js
2023-03-04T14:43:54.576187+00:00 app[web.1]: Did you mean to import react-icons/ri/index.js?
2023-03-04T14:43:54.576188+00:00 app[web.1]: at new NodeError (node:internal/errors:387:5)
2023-03-04T14:43:54.576188+00:00 app[web.1]: at finalizeResolution (node:internal/modules/esm/resolve:326:17)
2023-03-04T14:43:54.576189+00:00 app[web.1]: at moduleResolve (node:internal/modules/esm/resolve:907:10)
2023-03-04T14:43:54.576189+00:00 app[web.1]: at defaultResolve (node:internal/modules/esm/resolve:1115:11)
2023-03-04T14:43:54.576189+00:00 app[web.1]: at nextResolve (node:internal/modules/esm/loader:163:28)
2023-03-04T14:43:54.576190+00:00 app[web.1]: at ESMLoader.resolve (node:internal/modules/esm/loader:841:30)
2023-03-04T14:43:54.576190+00:00 app[web.1]: at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
2023-03-04T14:43:54.576190+00:00 app[web.1]: at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
2023-03-04T14:43:54.576191+00:00 app[web.1]: at link (node:internal/modules/esm/module_job:75:36)
2023-03-04T14:43:54.590098+00:00 heroku[router]: at=info method=GET path="/" host=m2-site-root.herokuapp.com request_id=8e226a52-6bdc-4758-bce8-b0ca06a02e1e fwd="79.177.38.116" dyno=web.1 connect=0ms service=54ms status=404 bytes=406 protocol=https
2023-03-04T14:44:42.822414+00:00 heroku[router]: at=info method=GET path="/" host=m2-site-root.herokuapp.com request_id=17949aab-0939-4bd7-8462-e032a3e0bb07 fwd="79.177.38.116" dyno=web.1 connect=0ms service=4ms status=404 bytes=406 protocol=https
2023-03-04T14:46:34.000000+00:00 app[api]: Build succeeded

    In the case presented there's a missing dependency that's not accessible to the app. In my case it's a simple solution of adding react-icons to my package.json. In your case the issue might be a different one.