Empty css after heroku deployment - css

I am not familiar to heroku. I have a rails app working fine on local. When I deploy it on remote, I get no css loaded. I can see the css file in my console, but it is empty.
I am using Rails 5 and ruby 2.4.6. Does someone has an idea ?

The most probable reason for this is the fact that in the local environment, the assets can be retrieved directly from the asset pipeline/webpacker.
On heroku the app server is running on production environment and only loads the compiled static files for js/css/images/fonts.
Try running the below code from your console.
heroku run rails console
rails_env=production rake assets:precompile
heroku restart
P.S In case this does not work there must be a setting in production.rb called fallback to asset_pipeline something like this. Set it to true. Not recommended though.

Related

How to host Next.js static website on Vercel without running build?

I made a website that is fully static. I can get the output files by running the following command locally
next build && next export which produces an output folder out
I'd like to simply put the out folder on Vercel but I'm not sure how to do that. When I connect my GitHub repository to Vercel it wants to build the whole project however I want to just give it the out folder and not have it run the build process.
Go to Vercel Dashboard > Your Site > Settings > Build & Development Settings:
After configuring the settings as above, make sure out directory is not there in .gitignore, and then trigger the build (Deployments > Kebab Menu > Redeploy).
Note that using "Other" as framework preset may appear as if the code will not be optimized like other Next.js projects. This is not true. It will not impact your site's performance, and the assets will still be served from Vercel's Edge Network. I don't think that there is any difference between deploying this way and using Next.js preset to deploy a statically exported app; except the latter will consume your build minutes (which I don't think matters on Vercel).

Angular Universal + Firebase cloud functions deployment issue

I've been stuck on this issue for some time now.
My Angular project version is 9.0.3.
The #angular/fire version is 6.1.4
I have followed the guide here
The project builds and renders for the local Express server I have.
The problem occurs when I deploy the project to Firebase with a cloud function that will render the application.
Running the command ng deploy gives the below error
Error: ENOENT: no such file or directory, open '/home/teebo/Development/motf/dist/motif/browser/index.html'
This issue is linked to a reported issue here
I have investigated and found that in the project's dist folder, a index.original.html file is generated instead of index.html.
I have opened an issue here with no feedback from the maintainers.
If there is anything I am missing or there's something I can do to circumvent this issue, please share and any suggestions are appreciated.
Any suggestion, comment, anything.
I have found a way to circumvent this issue.
This is not a proper solution for the ng deploy issue but at least I can deploy the ssr function.
Because my dist folder is nested in another dist folder (Which does not include the browser build folder), that is why I was getting the error when running ng deploy. Below are steps I've followed to at least be able to deploy.
Run ng deploy (It will error out with the above error but will build the app and create a dist folder).
Copy the browser folder to the dist folder that does not have it (In my case I have copied it to a dist folder one level up).
Deploy the ssr function by running firebase deploy --only functions:ssr (You can change functions:ssr to whatever name you have named your function).
This worked for me;
It would save time to write an npm script to do all this but then; I am not sure if my firebase/universal config is wrong or there is a bug with #angular/fire.

How long it takes for a firebase hosting to work?

I followed the instructions, and deployed a simple web yesterday. At first, it kept showing the default website, saying " you've deployed successfully...", not my web.
Also, the 'firebase open' command + "Hosting: Deployed Site" leads to a undefined site:' undefined.firebaseapp.com '.
But, magically, about an hour later when I open the link from 'firebase console' again, the web showed up... I am not sure whether 'firebase open' command worked cause I didn't try.
Today, I added some features, and deployed again. In the firebase CLI, it said deployed. But, the link still showed the old version.
I'll catch up an hours later to see whether it works, but even it works, it takes too long.
has anyone had the same experience? what's wrong with my web?
Thanks.
This is how I solved this issue for my angular 7 app deployment on Firebase hosting:
ng build --prod
go to dist/myproject and run command Firebase init and...
I went to dist/myproject that now contain build files along with Firebase related files. Copy all files except Firebase related files to dist folder in side dist/myproject.
there you will get overwrite warning just select overwrite option.
after copy process completes, run command Firebase deploy.
after completion of process go to shown URL and there you will find your running app.

Grunt not working in IIS application

I am running an ASP. NET application and calling a batch file using Process.Start(). The file contains some grunt commands. On opening the file using Start.Process() I get an error saying "'grunt' is not recognized as an internal or external command,\r\noperable program or batch file.\r\n". I have added nodejs and npm to the environment variable PATH. The same code works fine on Production server.
maybe that link can help you?
https://github.com/kanema/grunt-iis

CSS is looking different on heroku

As you should see in the images below, the css on my local host site is spaced much better at the top than it is on heroku.
Has anyone had this type of problem before. You can see it best on this page http://pltcpal.herokuapp.com/forums/
I'm using Twitter bootstrap, which recommends adding
`padding-top: 40px;`
to body if using the top nav bar. Somehow it's not working...
The problem is related to the handling of the asset pipeline on Heroku. There are several ways on how this can be handled, see http://devcenter.heroku.com/articles/rails31_heroku_cedar
I fixed the issue in my application by pre-compiling the assets locally on my machine and then pushing them to Heroku.
Pre-compile the assets:
RAILS_ENV=production bundle exec rake assets:precompile
Add/commit the changes to git repository:
git add public/assets
git commit -m "vendor compiled assets"
To be safe I tested the whole thing on a local branch on my machine first which I pushed to Heroku using the following command (Heroku normally ignores all branches except the master branch, thus the trick):
git push -f heroku heroku-assetpipeline:master
FWIW, I had this same issue and checked everything I could think of, as well as those above. It turned out I must have zoomed out in my browser while on localhost, and I had the standard zoom on my production url.
It was as simple as resetting the zoom in my browser on both pages. Hope this helps someone else with the same problem.
I have the very same issue.
When I compare the development and production code, it occurs that on the development machine the stylesheets and javascript files from bootstrap all get loaded whereby on the production site (Heroku), there is only one application-XYZ.css and one application-XYZ.js.
I am not sure if this could be an issue with the asset pipeline.
Could probably someone elaborate on what needs to be done to (pre-)compile the asset pipeline such that deployment on Heroku succeeds.
Is it possible that you pre-compiled your assets locally at some point? To force heroku to compile your assets during slug compilation you can rename your public/assets/manifest.yml to public/assets/manifest.yml.bak, commit your source, and push to heroku.
Heroku assumes you compiled your assets locally when it sees the manifest.yml file.
I had this same problem and followed the instructions of a couple of different pages including Heroku's own documentation. I'm posting here to help the next guy because possibly due to changes in Rails 4, Heroku, or Github but the above directions did not work at all for me. However I did get it to work and here's how.
Yes you probably should precompile your assets using RAILS_ENV=production bundle exec rake assets:precompile but after that go into you 'public/assets' folder and copy "all" '.css','css.gz', '.json', '.yml', '.js' files that start either with 'application' or 'manifest'. Move them to a folder outside of the application's directories. Do this just encase anything goes wrong. Verify all of those files are deleted from the apps 'public/assets/' folder. Next restart your local rails server and verify your app is still behaving as you intend it to. Then go to your Github account and go into the 'public/assets/' directory of your repository and delete all the same files that you just did locally. Then add/commit locally, then push to git, then to heroku, and walla you're done it should be working.
The rationale behind it, what I assume, is because when you push to Heroku it checks for compiled assets in your repository and because of this, even though I had precompiled locally, it was still pulling some asset configurations from previous commits. By removing these files, Heroku must compile them during the push. One thing I didn't try which may work is just switching to another branch and deleting those files and deploying that branch to Heroku, so you may want to try that first, but this is what worked for me.
One other note, renaming the files to .bak or .old Heroku still considered them as their regulars and displayed them as it was the original ones that were not displaying properly.

Resources