Ember-Cli (0.40) assets when deploying to heroku - heroku

I am deploying and ember-cli app to heroku and pretty much everything is working as hoped. The only issue is that when the app precompiles, it adds a fingerprint to images and assets as expected but does not add them to the asset reference within a stylesheet. Specifically, I have a couple of images as background images in stylesheets that when deployed can't be found due to the addition of the fingerprint to the file. How do I either get the fingerprint added to the asset path reference in the stylesheet or tell ember/heroku to not add fingerprint to any files? Thanks for the help.

A little late getting back to this but I ended up just disabling the fingerprinting for now by adding this in the Brocfile.js
var app = new EmberApp({
fingerprint: {
enabled: false
}
});

You just need to upgrade to the latest version of Ember CLI. From version 0.1.3 of Ember CLI there's no need to disable fingerprint. I think it's fixed by this pull request.
According to Ember CLI guide steps to upgrade to the latest version of Ember CLI are included with each release and can be found here.
Before upgrade, I had issues with Lightbox2 and Fancybox(image assets). After upgrade, all references to fingerprinted assets are applied correctly.

Related

Bug with next-i18next and deployment on vercel (recently)

Update 2:
This probably has to do with the this PR where assets have been removed as dependency.
Update 1:
Managed to get a reverse shell into the serverless function and it really would appear that there is no public folder anymore:
Provide environment information
"next": "12.2.5", // Also tested on 12.2.6-canary.7 and 12.1.6
"next-i18next": "12.0.0", // Also tested on 10.5.0
"react": "18.2.0", // Also tested on 17.0.2
"react-dom": "18.2.0" // Also tested on 17.0.2
How are you deploying your application?
Vercel
Bug Description
Context
We encountered a bug around next-i18next that resulted in serverless crashes for catch-all routes. We noticed this bug for the first time Monday around 14:00 CET and think it is potentially related with a change in the serverless runtime/filestructure as older deployments that used to work stoped working when redeploying.
Some other people also seemed to have encountered the same bug. See also here:
This discod thread
This next-i18next bug report
Stackoverflow same problem
What we tried
So we upgraded our versions of next and next-i18next (like some of the other people did).
With the most recent next.js and next-i18next versions translations seem to work only in very specific cases.
We created a minimal replicable deployment (Repo) where we prebuild two pages via putting them in getStaticPaths:
https://ed-i18n-bug.vercel.app/en/test/prebuild
https://ed-i18n-bug.vercel.app/de/test/prebuild
Both pages do not use translations when opening them directly.
However, when first navigating to the index.js and then clicking on of the links the two pages use proper translation.
Note: The translations will break upon refresh.
Setup Description
catch all route in pages folder
page set to static site generation
default locale is set
incremental static regeneration is on
Expected Behavior
working Translations
Links to Reproduce
Example repo here: https://github.com/everdropde/ed-i18n-bug
Example Vercel Deployment: https://ed-i18n-bug.vercel.app/de
Steps To Reproduce
Clone the Repo and deploy it to Vercel
Click any link on page
if you have outputFileTracing enabled and using latest version of Next.js then this should work with latest CLI version
https://github.com/vercel/next.js/issues/40130
Setting env variable VERCEL_CLI_VERSION=vercel#28.1.4 fix the issue
Also if you set outputFileTracing: true in next.config.js it works with latest CLI version

How can Puppeteer's uploadFile work on Heroku?

I'm trying to automate the task of downloading mp3 files from a web site and uploading to another web site. With Puppeteer, I'm able to do this with the following code.
// ... Download the file and save locally
// Sets the value of the file input to fileToUpload
inputUploadHandle.uploadFile(fileToUpload);
// ... submit the form
This works fine on my Mac. I can download the file and upload it through the form submit. When I deployed it on Heroku, I'm aware that Heroku's ephemeral file system will save the file to /app folder. And I'm even able to send that saved file through NodeMailer as an attachment.
But on my Heroku app, when Puppeteer submit the form, the file is not uploaded as it should be. The submit happens as if the file is not selected.
I know I can have work arounds like grabbing the file from my own server. But I'm still curious why this happens. What makes Puppeteer uploadFile to fail on Heroku?
By the way, here are two links that might help with the background:
Practical Puppeteer: How to upload a file programmatically
puppeteer-heroku-buildpack
The solution: if you want to use uploadFile, don't use Puppeteer version 2.1.1, for now stick to 2.0.0. In your package.json:
"puppeteer": "2.0.0"
I checked recently and found out that uploadFile is still broken in Puppeteer 5.5.0.
Here's the detail. When I develop on my Mac, I didn't specify a version for puppeteer. But I happened to be using a version in which uploadFile works. However, every time you push to Heroku, Heroku will check your package.json to install all dependencies. In my case, Heroku updated to the latest version (by the time of this writing 2.1.1) which broke the uploadFile function.
Even though I printed out the Chromium version early on and noticed that Heroku is using a higher version, it never occurred to me that I should test with an older version of Puppeteer. Instead, I spent a lot of time testing other workarounds, which all failed. Any way, once you eliminate the impossible, whatever remains, no matter how improbable, must be the truth.
I'll post an issue on Puppeteer and hope this to be fixed in the next release.

how to use npm pdf image package in heroku app

I'm attempting to use the npm package pdf-image (https://www.npmjs.com/package/pdf-image) for an app that is deployed on heroku. It requires imagemagick ghostscript poppler- (ensure you have convert, gs, and pdfinfo (part of poppler) commands).
I've attempted to add a imagemagick, ghostscript, and poppler buildpack to the app and then deploy. The app is working but times out (h12 heroku error) when it comes to the method that requires the pdf-image package.
The method works locally without problem.
I'm not sure how to trouble shoot. I see that there are a lot of different options to use for the buildpacks and am wondering if I added the best one or not.
Has anyone deployed to heroku with the pdf-image package?
Which buildpacks do you recommend for ghostcript, imagemagick, and poppler?
What are other possible causes for the time out and ways to troubleshoot?
Thank you!
Depends on what heroku stack you're using.
https://github.com/Fieldwire/heroku-buildpack-poppler
This buildpack has worked for me on heroku-18 stack. You can find more buildpacks here .
Also you may check here if the library is not installed already on your server and what version.
For example the imagemagick and ghostscript are already there since cedar-14 so you don't need to add that buildpack.

Using Babel in Production - How to precompile scripts

I'm building an application using Oracle Application Express (APEX) [so no existence of Node].
I have two issues which are somehow related concept-wise.
Issue #1:
I've included the React.js library in all of my pages to use some of its features.
I'm using babel to convert my JSX to simple JS. Everything's working fine.
But I keep on getting this warning in my console :
You are using the in-browser Babel transformer.
Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/
I know I must precompile my scripts but I have no idea how. I visited the link and it got me all the more confused.
Issue #2:
The other issue I have is that I've got all my react related code in a separate .js file and I have embedded it in my page using this :
<script src="someJSFile.js" type="text/babel"></script>
Setting the type to "text/babel" raises this warning :
Fetching scripts with an invalid type/language attributes is deprecated
and will be removed in M56, around January 2017.
See https://www.chromestatus.com/features/5760718284521472 for more details.
Is there any workaround for this issue?
Issue 1: This is linked to what ever bunlder you choose (see issue 2 below). Which ever you do choose, will allow you to set the node env to production, which will put React in "production" mode - basically scraping out all the unneeded (but helpful) development messages and checks.
Issue 2: You will need some module bundler at the end of the day. Webpack is the goto at the moment. Webpack Site
Alternatives include:
Gulp + Browserify
Rollup
EDIT: I know you said "no node". You won't need node to run anything on the server, only on your local machine where you build the files. Node is easy to install on pretty much any local machine

Heroku production differing from local development (Rails)

I'm new to coding and to Rails and I've run into this issue for the first time - the local development version of my app is differing in a detrimental way from the production version.
I'm using Zurb Foundation on my Rails app and deploying to Heroku to see it in production.The issue that I am facing is that locally, the CSS I wrote to get the padding between the navbar and the rest of the page is working correctly, but when I deploy to Heroku the CSS is not rendering correctly and the padding is missing.
I wrapped the yield in application.html.erb with a div of a class I named "fixednavbar" and wrote the following css:
.fixednavbar {
padding-top: 60px;
}
I put this css in a layouts.css.scss file in the asset pipeline (Rails 3.2.13). The code in the application.html.erb file is as follows:
<div class="row fixednavbar">
<%= yield %>
</div>
I have checked the code locally and on github to make sure they match up and they do. I took a drastic step and started a new repository, then removed the local git repository and started a new one and pushed all the current files there (I created a new repository on github so that all of my previous versions are still in the original repository).
After doing this, I created a new Heroku app and deployed and still the production version is not rendering the CSS the same as the development version.
I'm at a complete loss as to why these versions would differ when the code is the same (unless there is something lurking somewhere else that I have not thought to check).
Any and all help is much appreciated. As I said, I'm knew to Rails (and coding for the most part) and this is the first time I've run into an issue like this.
Thank you!
Update:
I have continued to try to sort this out. I did other work on the application and then came back to this issue. I want to get the production version to reflect what is in development, so any help at all would be amazing.
To describe the issue further: It is almost as if my production deployment to Heroku is stuck in an old version of the app when the css wasn't worked out yet. The navbar color is stuck on the first color I changed it to and will not update to the new color. The sticky nav is still causing an issue in production where the body is partially hidden behind the nav.
Now, in development running the local server, I have fixed all these issues. The changes are reflected in development and everything is as it is intended to be.
After the changes, I commit to the git, then I push to github. After pushing to github, I push to Heroku.
The github files reflect the changes and the code is as it should be. Still, Heroku is not reflecting this.. I'm honestly stumped here and need some help please.
With some help from the users who responded, I was able to identify the error and search for the solution. I found it HERE.
The solution is to look in the production.rb file and find the line where it says
config.assets.compile = false
and change "false" to true.
config.assets.compile = true
Then run
rake assets:precompile RAILS_ENV='production'
After deploying to Heroku, you may need to run
heroku run rake db:migrate
This got everything working correctly upon deployment to Heroku.
How have you included this plugin? Instead of adding the js and css directly, try using their gem from https://github.com/zurb/foundation-rails and remove any direct references from your app. I've faced similar issues with other plugins like bootstrap, bxslider etc.
As a beginner, I was having a difficult time with the same issue. Because I'm using Rails 4, the simple step of removing this line from config/application.rb did the trick.
config.assets.initialize_on_precompile = false
https://devcenter.heroku.com/articles/rails-asset-pipeline
Granted, I troubleshot all the above steps and a few others from other postings.

Resources