0

I recently finished developing my app locally and wanted to push it to Heroku (first time doing this!). I am using Rails backend with React frontend all within one repo. I am using MDBootstraps for styling. Everything renders properly locally, but when pushed to Heroku, none of the styling seems to render.

What it looks like locally: enter image description here

What is looks like on Heroku: enter image description here

mee_yuhh
  • 36
  • 2
  • It seems like you assets might not have been compiled. Do you use webpacker (https://edgeguides.rubyonrails.org/webpacker.html) or Assets Pipline (https://guides.rubyonrails.org/asset_pipeline.html)? Share some configs maybe? – Greg Mar 28 '21 at 21:23
  • how did you install mdbootstrap? – Denis S Dujota Mar 29 '21 at 01:09
  • @DenisSDujota I followed the quick start from their website: https://mdbootstrap.com/docs/react/getting-started/quick-start/ and use npm to install it. I also have the proper imports in my index.jsx file. I can see mdbreact within my package.json – mee_yuhh Mar 30 '21 at 22:46
  • @Grzegorz I apologize I am not too familiar with the webpacker/assets pipeline portion of the code, but I do have a webpacker.yml file. Additonally I see when I am pushing to heroku that it outputs "Preparing app for Rails asset pipeline" and "Running: rake assets:precompile" What exactly should I be looking for to see if that is working properly/compiling my assets? – mee_yuhh Mar 30 '21 at 23:05
  • you may need to tell rails (via webpack) to include that particular node module inside the css precompilation i remember i've done that a few times, but will have to find it in one of my projects. will get back to you – Denis S Dujota Mar 31 '21 at 01:52
  • @mee_yuhh when you visit your deployed app in a browser, check in the dev console if any errors show (i.e. 404 error when downloading the css file or sth like that) – Greg Mar 31 '21 at 07:35
  • @Grzegorz I am not seeing any errors in the dev console. However, I noticed locally when I'm inspecting the page, and I look under sources there are the directories for assets, packs, etc, and there are also top level files for index application.css, and mbd.css. When I look at Sources when I am viewing my app on Heroku, the index file has way few script tags, and is missing the application.css and mdb.css files. Any ideas how to get those installed/compiled with the build? – mee_yuhh Apr 03 '21 at 18:37
  • Check heroku's deploy log, is there a line saying something like "precompiling assets"? – Greg Apr 04 '21 at 08:15

0 Answers0