I have deployed an app at heroku.
Everything works fine, locally. However, when deployed heroku can't find two img. index.html contains exactly this, at different places :
FOUND <img src="img/bamboo-black.png" height="27"> <div class="loaderWrap">
NOT FOUND <img class="loader" src="img/ajax-loader-black.gif"></div>
NOT FOUND <img src="img/person-placeholder.jpg" class="mainPicture" width="150">
Why would it work locally and fail on heroku ? I don't understand.
Did you commit those two files to the repo?
Do a git status and see if they're in the 'new files' section.
If you've committed the files, then login to the Heroku dyno and verify they are there.
$ heroku run bash
You can also try a restart.
$ heroku restart
Fixed it.
For those who might encounter the same problem someday : i used a CDN (cloudinary)
I replaced :
<div class="loaderWrap"> <img class="loader" src="img/ajax-loader-black.gif"></div>
By this :
var $loader = $.cloudinary.image( LJ.cloudinary.loader_id, LJ.cloudinary.displayParamsLoader );
$loader.appendTo( $('.loaderWrap') );
It works fine now.
Related
Hello i'm having issues deploying my website/app to vercel. It's a node/express backend and a create-react-app front end.
I should start by saying that localy everything works perfectly.
As for deployment, when vercel builds it, in its build logs appears this line "Warning: Due to builds existing in your configuration file, the Build and Development Settings defined in your Project Settings will not apply. Learn More: https://vercel.link/unused-build-settings".
Not only that, when visiting the vercel it appeears 404 not found. (https://note-keeper-node-backend-2gbi1g75b-orlandovsilva.vercel.app/)
Also followed this tutorial (https://dev.to/andrewbaisden/how-to-deploy-a-node-express-app-to-vercel-2aa).
What could the issue be?
For 404 not found in vercel try to put in Settings->Project Settings->Environment Variables->Add New
Name field => CI
VALUE field => false
This works for me. Resolve 404 problem in vercel deployment.
Verify if you put Root Directory of your project correctly.
I'm working in the Laravel web-app. My images are stored in "public/assets/dist/img"
What I'm using in my view is :
<img src="{{asset('dist/img/user1-128x128.jpg')}}" alt="User Avatar" class="img-size-50 mr-3 img-circle">
but when I try to execute my Laravel app using "php artisan serve" I see my images are broken, when I try to inspect and get image src that is: http://127.0.0.1:8000/dist/img/user1-128x128.jpg
It shows 404 | Not Found page.
I double checked that image with name "user1-128x128.jpg" exists in "public/assets/dist/img"
Why I'm not able to see the image?
Is there something I'm missing?
It would be :
{{ asset('/assets/dist/img/user1-128x128.jpg') }}
assuming that your /assets/dist/img/user1-128x128.jpg is under /public/
I'm working on a Flutter Web App and today I got these errors:
A bad HTTP response code (404) was received when fetching the script.
Uncaught (in promise) TypeError: Failed to register a
ServiceWorker for scope ('https://adrieldf.github.io/') with script
('https://adrieldf.github.io/flutter_service_worker.js'): A bad HTTP
response code (404) was received when fetching the script.
The only thing "different" that I added to the code was a dependency for the Share library, but I don't think that that is the problem.
Here is the interesting thing, I've got the app hosted on Github Pages and after every commit I have a action that builds the web app. After the build, when I try to access it doesn't load and the errors appears. But building it and running it locally works normally.
Here is the source code if you want to check: https://github.com/Adrieldf/allthewidgets
The website link is in the repo description.
I solved my problem by changing the index.html file
from
<base href="/">
to
<base href="/directory_name/">
Looks, like you are trying to run the project from the project_root/web folder.
If you just start a webserver here (for example, by using python -m http.server 8088), the application will start and even will be working partially.
But compiled web app located in project_root/build/web. Try to run your webserver in that folder.
Solved by
changing base tag inside build/web/index.html
<base href="/">
to
<base href="./">
added . (dot)
Well, the problem is what the error message says. Your JS is trying to register a Service Worker from the script 'https://adrieldf.github.io/flutter_service_worker.js' but that does not exist on the server. If you open that URL it's a 404.
For me got resolved simply after upgrading flutter packages:
flutter packages upgrade
flutter create .
flutter build web
and use the project/build/web as server's location
you can use peanut to build your flutter app and copy it to gh-pages project using something like:
peanut --extra-args "--base-href=/directory-name/"
Solved by changing base tag inside build/web/index.html
<base href="/">
to
added . (dot) with the folder name inside which i added my flutter build
<base href="./flutter/portfolio">
If your PC web and Mobile web are different, you can try to upload flutter_ service_ worker.js in your PC web
thanks for taking time to help me
im deploying a nodejs express js project
these are the steps that i have done:
1- change the port to: process.env.PORT
code:
const PORT = process.env.PORT || 9000;
app.listen(PORT , function() {
console.log('Application is listening on 9000');
});
2- create Procfile with: web: node server.js
3- make sure in package json the npm start command points to "node path/server.js"
the server works locally
4- important note: I am sending an AJAX request from my front end to the server to get data
I have read on you documentation that i should add 0.0.0.0
$.ajax({
url: "0.0.0.0/hotels",
cache: false,
type: 'GET',
success: function(result) {
bla bla ....
}
});
also i have tried to add the url of heroku the one i get after creating
thanks in advance
have a great day
did not solve it yet but i organized some helpful heroku commands
useful commands
git remote -v
git remote rm heroku
heroku create
git push heroku master
heroku ps:scale web=1
heroku open
heroku logs --tail
heroku run bash
Your code there looks fine (except 0.0.0.0 -- just use a relative path like /). I would ensure you've actually pushed the changes you have there. If you run heroku run bash, do you see your Procfile? When you run node server.js in that environment, does it run successfully?
I've seen Heroku customers get stuck on an issue like this, when the reality is that the code they have locally wasn't properly sent to Heroku.
Hello #jmccartie thank you for replying but it still does not work
could it be the static __dirname? im starting to question every part of the code :D
I changed the path and just to make sure i understood correctly
it used to be : "http://localhost:9000/data/hotels"
now is: "/data/hotels"
would you mind taking a look at my code?
just double check the parts i mentioned
https://github.com/hibaAkroush/herokuNode
i will name the files to make it easier for you
1- Procfile in the root
2- server in server/index.js line 24
3- the front end (where im sending an ajax get request) client/home.js line 6
4- packagejson line 10: "start": "node server/index.js"
thanks
ok i fixed it ...
wohoo!
not sure which thing i made fixed it
but what i did was:
1- I moved the server to the root and of course changed the code a bit so it would still work than i tested it locally to make sure
2- pushed on github
3- added ./ to procfile so it became
web: node ./index.js
instead of web: node index.js
thanks everyone !
We are using yeoman for our dev process and currently using the "grunt server" command to run the grunt connect web server for local development. Every time we save a file, grunt will run all its tasks and reload the browser.
The problem is with Server side includes we use to include the header and footer. We had it previously working with Apache, IIS and Tomcat but have no idea how to get connect to do the same. It just treats it as an html comment.
eg include:
<!--#include virtual="header.html" -->
So,
1. Is there a way to get grunt/connect to include these files?
2. If not can we use Apache with yeoman/grunt?
3. If all fails, is there another way to include files with connect?
You can have express handle SSI with the help of the ssi node module.
I put together a github repo with this simple example: https://github.com/sfarthin/express-ssi-example .
I deployed this app to heroku so you can see it in action: http://intense-basin-9464.herokuapp.com/
app.use(function(req,res,next) {
var filename = __dirname+(req.path == "/" ? "/index.shtml" : req.path);
if(fs.existsSync(filename)) {
res.send(parser.parse(filename, fs.readFileSync(filename, {encoding: "utf8"})).contents);
} else {
next();
}
});
you can easily use connect-ssi:
https://github.com/soenkekluth/connect-ssi
I also used the ssi module for that.
for now I includes are only allowed for .shtml files. 'will change that soon.
Thanks a lot for all your help #steve-farthing and #soenke I finally ended up using a much simpler solution which was to install Apache with SSI enabled and add the following JS tag to the footer.
<script type="text/javascript">
document.write('<script src="//localhost:35729/livereload.js?snipver=1" type="text/javascript"><\/script>')
</script>
Now when we run grunt serve we still need to manually navigate to http://localh0st/app/ but everything else seems to work fine after that.