Deploy to Heroku

[paulofabiano]

Hey, folks!

I just loved this and it's working like a charm with my project.
But it is time to deploy. I am using Heroku but getting this error:

I used ./run yarn:install and it worked well, the yarn.lock file was created successfully.

Have anyone struggled with this already?

[nickjj]

Hi,

I don't use Heroku personally but it looks like it doesn't let you write to /node_modules which is strange because at build time no volumes are being used so I don't know why they would restrict where a container writes files to since it's running in the context of the Docker image's file system.

[paulofabiano]

Actually I was able to deploy to heroku using docker.
The only problem now is that the assets are not working the the whole app is without styles, images, etc.
Funny that when I run the app locally, with docker-compose, it works perfectly.

[nickjj]

Ah that would make sense if you didn't pick Docker before.

Try setting this env for your app in Heroku: RAILS_SERVE_STATIC_FILES=true

It's documented in this project's .env.example file. It configures Rails to serve assets instead of depending on nginx or another web server.

[paulofabiano]

Thanks, Nick! Well, I did it but I'm getting this error:
The asset "application.css" is not present in the asset pipeline.
I thought I could be the manifest.js but it includes the images and builds folders.

It is funny because during the deploy, I can see the output when building the assets but the content of the builds folder (applications CSS and JS, which are in the folder) is not in the logs but the images are ok:

remote: Task completed in 0m2.907s
remote: Done in 3.00s.
remote: I, [2023-10-11T10:12:02.184794 #7]  INFO -- : Writing /app/public/assets/manifest-b4bf6e57a53c2bdb55b8998cc94cd00883793c1c37c5e5aea3ef6749b4f6d92b.js
remote: I, [2023-10-11T10:12:02.186693 #7]  INFO -- : Writing /app/public/assets/manifest-b4bf6e57a53c2bdb55b8998cc94cd00883793c1c37c5e5aea3ef6749b4f6d92b.js.gz
remote: I, [2023-10-11T10:12:02.187003 #7]  INFO -- : Writing /app/public/assets/flags-959070a9f002abd28383322dd455a851d1fd445974edb3f720d54ff79894e28b.png
remote: I, [2023-10-11T10:12:02.189557 #7]  INFO -- : Writing /app/public/assets/flags@2x-d00ec77cf49d0c3fbd725dbcdcca661b5db35a02d12f8f4fcf8a3ce6065391bc.png
remote: I, [2023-10-11T10:12:02.190297 #7]  INFO -- : Writing /app/public/assets/logo-dd0992641d0a3432bbb4362da45a7aa7ffef8043682eba436d44713914147903.png
remote: I, [2023-10-11T10:12:02.193081 #7]  INFO -- : Writing /app/public/assets/logo-025417356febac8a72e4c14fed9b04c9aa378c47386a57ef53cb207cf1b6afc4.svg
remote: I, [2023-10-11T10:12:02.195826 #7]  INFO -- : Writing /app/public/assets/logo-025417356febac8a72e4c14fed9b04c9aa378c47386a57ef53cb207cf1b6afc4.svg.gz
remote: I, [2023-10-11T10:12:02.196036 #7]  INFO -- : Writing /app/public/assets/turbo-4851a9a0b1d947e810dfd0448a72aef261d455183ebea681f4f28a73640a9ece.js
remote: I, [2023-10-11T10:12:02.196144 #7]  INFO -- : Writing /app/public/assets/turbo-4851a9a0b1d947e810dfd0448a72aef261d455183ebea681f4f28a73640a9ece.js.gz
remote: I, [2023-10-11T10:12:02.196621 #7]  INFO -- : Writing /app/public/assets/turbo.min-f309baafa3ae5ad6ccee3e7362118b87678d792db8e8ab466c4fa284dd3a4700.js
remote: I, [2023-10-11T10:12:02.199103 #7]  INFO -- : Writing /app/public/assets/turbo.min-f309baafa3ae5ad6ccee3e7362118b87678d792db8e8ab466c4fa284dd3a4700.js.gz
remote: I, [2023-10-11T10:12:02.201459 #7]  INFO -- : Writing /app/public/assets/turbo.min.js-8bc8f4a58d1c106d58dec8bef6c638ff12ff4d078f19d8ebd8c4277f4c9bc85a.map
remote: I, [2023-10-11T10:12:02.238740 #7]  INFO -- : Writing /app/public/assets/turbo.min.js-8bc8f4a58d1c106d58dec8bef6c638ff12ff4d078f19d8ebd8c4277f4c9bc85a.map.gz
remote: I, [2023-10-11T10:12:02.249193 #7]  INFO -- : Writing /app/public/assets/actiontext-28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js
remote: I, [2023-10-11T10:12:02.249443 #7]  INFO -- : Writing /app/public/assets/actiontext-28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js.gz
remote: I, [2023-10-11T10:12:02.249637 #7]  INFO -- : Writing /app/public/assets/trix-1563ff9c10f74e143b3ded40a8458497eaf2f87a648a5cbbfebdb7dec3447a5e.js
remote: I, [2023-10-11T10:12:02.249772 #7]  INFO -- : Writing /app/public/assets/trix-1563ff9c10f74e143b3ded40a8458497eaf2f87a648a5cbbfebdb7dec3447a5e.js.gz
remote: I, [2023-10-11T10:12:02.249912 #7]  INFO -- : Writing /app/public/assets/trix-ac629f94e04ee467ab73298a3496a4dfa33ca26a132f624dd5475381bc27bdc8.css
remote: I, [2023-10-11T10:12:02.250016 #7]  INFO -- : Writing /app/public/assets/trix-ac629f94e04ee467ab73298a3496a4dfa33ca26a132f624dd5475381bc27bdc8.css.gz
remote: I, [2023-10-11T10:12:02.275925 #7]  INFO -- : Writing /app/public/assets/stimulus-f75215805563870a61ee9dc5a207ce46d4675c7e667558a54344fd1e7baa697f.js
remote: I, [2023-10-11T10:12:02.277091 #7]  INFO -- : Writing /app/public/assets/stimulus-f75215805563870a61ee9dc5a207ce46d4675c7e667558a54344fd1e7baa697f.js.gz
remote: I, [2023-10-11T10:12:02.277545 #7]  INFO -- : Writing /app/public/assets/stimulus-autoloader-c584942b568ba74879da31c7c3d51366737bacaf6fbae659383c0a5653685693.js
remote: I, [2023-10-11T10:12:02.278247 #7]  INFO -- : Writing /app/public/assets/stimulus-autoloader-c584942b568ba74879da31c7c3d51366737bacaf6fbae659383c0a5653685693.js.gz
remote: I, [2023-10-11T10:12:02.278764 #7]  INFO -- : Writing /app/public/assets/stimulus-importmap-autoloader-db2076c783bf2dbee1226e2add52fef290b5d31b5bcd1edd999ac8a6dd31c44a.js
remote: I, [2023-10-11T10:12:02.279272 #7]  INFO -- : Writing /app/public/assets/stimulus-importmap-autoloader-db2076c783bf2dbee1226e2add52fef290b5d31b5bcd1edd999ac8a6dd31c44a.js.gz
remote: I, [2023-10-11T10:12:02.279402 #7]  INFO -- : Writing /app/public/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js
remote: I, [2023-10-11T10:12:02.279492 #7]  INFO -- : Writing /app/public/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js.gz
remote: I, [2023-10-11T10:12:02.280873 #7]  INFO -- : Writing /app/public/assets/stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js
remote: I, [2023-10-11T10:12:02.281642 #7]  INFO -- : Writing /app/public/assets/stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js.gz
remote: I, [2023-10-11T10:12:02.282197 #7]  INFO -- : Writing /app/public/assets/stimulus.min.js-2cc63625fa177963b45da974806e7aee846cbf1d4930815733d0fdf3fb232325.map
remote: I, [2023-10-11T10:12:02.283204 #7]  INFO -- : Writing /app/public/assets/stimulus.min.js-2cc63625fa177963b45da974806e7aee846cbf1d4930815733d0fdf3fb232325.map.gz
remote: I, [2023-10-11T10:12:02.286360 #7]  INFO -- : Writing /app/public/assets/activestorage-3ab61e47dd4ee2d79db525ade1dca2ede0ea2b7371fe587e408ee37b7ade265d.js
remote: I, [2023-10-11T10:12:02.286485 #7]  INFO -- : Writing /app/public/assets/activestorage-3ab61e47dd4ee2d79db525ade1dca2ede0ea2b7371fe587e408ee37b7ade265d.js.gz
remote: I, [2023-10-11T10:12:02.338689 #7]  INFO -- : Writing /app/public/assets/activestorage.esm-01f58a45d77495cdfbdfcc872902a430426c4391634ec9c3da5f69fbf8418492.js
remote: I, [2023-10-11T10:12:02.341750 #7]  INFO -- : Writing /app/public/assets/activestorage.esm-01f58a45d77495cdfbdfcc872902a430426c4391634ec9c3da5f69fbf8418492.js.gz
remote: I, [2023-10-11T10:12:02.342348 #7]  INFO -- : Writing /app/public/assets/actioncable-5433453f9b6619a9de91aaab2d7fc7ff183e5260c0107cbc9a1aa0c838d9a74e.js
remote: I, [2023-10-11T10:12:02.343101 #7]  INFO -- : Writing /app/public/assets/actioncable-5433453f9b6619a9de91aaab2d7fc7ff183e5260c0107cbc9a1aa0c838d9a74e.js.gz
remote: I, [2023-10-11T10:12:02.343798 #7]  INFO -- : Writing /app/public/assets/actioncable.esm-e01089c3ec4fe7817fa9abcad06cab6bdc387f95f0ca6aab4bf7ba7537f70690.js
remote: I, [2023-10-11T10:12:02.344205 #7]  INFO -- : Writing /app/public/assets/actioncable.esm-e01089c3ec4fe7817fa9abcad06cab6bdc387f95f0ca6aab4bf7ba7537f70690.js.gz
remote: Removing intermediate container f01fd0677f87
remote:  ---> 89aad5365e3c

[paulofabiano]

I made it. It was some problem us esbuild that was not being installed in production. I reinstalled using rails javascript:install:esbuild and it worked.

[nickjj]

Nice, so in the end nothing really needed to change with this project to make it work on Heroku? Just setting that one env which is what you would need to do if you planned to host your app without nginx / Apache.

What Heroku config did you use if you don't mind sharing? That will help folks out I'm sure.

[paulofabiano]

Yes, indeed, it was just wrong configurations from my side.
Well, with your setup, the best option to deploy was migration my stack to container instead heroku-22 (heroku stack:set container) and defining a heroku.yml file, which basically acts as a docker-compose.yml.
Mine is like this:

setup:
  addons:
  - plan: heroku-postgresql
    as: DATABASE
  - plan: heroku-redis
    as: REDIS
  config:
    REDIS_TLS_URL: ...
    REDIS_URL: ...
    SECRET_KEY_BASE: ...
build:
  docker:
    web: Dockerfile
  config:
    RAILS_ENV: production
run:
  web: bundle exec puma -C config/puma.rb

So, the service you have in your docker-compose (db, redis, etc) they should be replaced by Heroku's add-ons. For now I am using only postgresql and redis.

The rest is very straightforward. The only catchy thing is the other processes defined in the Procfile.
In heroku you can't have separate processes so, if you need need the js and css process to run, you need to build them within the web one, like this:

run:
  web: bundle exec puma -C config/puma.rb
  js: 
    command:
      - yarn build --watch
    image: web
  css: 
    command:
      - yarn build:css --watch
    image: web

But I decided not using it and setting the RAILS_SERVE_STATIC_FILES=true like you said. During the deployment, yarn:build and yarn:build:css are executed and I can use them statically.

You can see more details about heroku.yml file in here https://devcenter.heroku.com/articles/build-docker-images-heroku-yml

Thank you for your attention and support :)

[nickjj]

Thanks. Yes, in production you wouldn't want to run js or css containers because the assets get precompiled at build time in the Dockerfile. Once they are created they can be served either directly through Rails or through a web server like nginx.