I'm trying to run Next js on top of Netlify, but I get 404s except for the root page, and Netlify doesn't show any logs, so I don't know what the error is.
In the React app, I had to create a redirects file under puiblic, so I tried that too, but it doesn't work. What should I do?
It is a _redirects file not redirects,You can also use netlify.toml instead, and it should be located in publish directory it's important!
Here you have few resource which are very helpful ;-) source-1 , source-2 , source-3. Good Luck!
I'm trying to deploy my tailwind site to Netlify. I've been able to deploy it but it only comes out as plain html, no css. My guess is that its because the styles.css is in a src folder but I'm not very sure.
I used tailwind without PostCSS so that could also be a problem.
Any help is appreciated;
Github: https://github.com/JojoDuke/Insure-LandingPage-Design
Site-preview: https://naughty-ptolemy-d0f425.netlify.app/
It looks like your link tags in your HTML aren't pointing to the same location as the output of your tailwindcss build command, causing the CSS to not be pulled through.
Try recloning your repo from scratch, and running the build command you put in your netlify settings, and seeing whether that generates the file in the right location, then update the HTML to match that location.
I have a bunch of images in a hidden gallery, only shown when a user clicks on a certain button.
On the development server, everything is fine, no errors or issues, but when I deploy my website and open the gallery the images don't show and throw a 404 error in the console (I included the required props).
When I replace the <Image/> component with <img>, everything is fine on the development server and live. Can anyone please help? I searched a lot and I didn't find anything like this issue.
My solution:
I had the same issue and solved it by renaming the image file names.
How the issue arose:
I had renamed the images, only changing uppercase to lowercase letters. This resulted in the files being wrongly named in my github repository. After a rename with new characters, the files were correctly updated on github.
Image Optimization using Next.js' default loader is not compatible with next export.
Possible solutions:
Use next start, which starts the Image Optimization API.
Use Vercel to deploy, which supports Image Optimization.
Configure a third-party loader in next.config.js.
That means: Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available
To solve this problem. I just used next-optimized-images for static image and next/image for images from the cloud.
Kindly read this article for more understanding: https://dev.to/jameswallis/next-image-and-next-optimized-images-a-brief-comparison-4c4i
Create a folder on root call it 'static' which is bassically /static/imagename.png
Set the source to the image like so;
<img src="/static/imagename.png" />
This should load the static image in file both in dev environment and build file.
I've recently switched from PHP to JS Meteor+ReactJS. I've started my first project and almost instantly got a bump in the road.
I cannot seem to get image in my scss file to work. Same with trying to get to it via url in my browser. In the browser I get flow-router error about missing path. Scss doesn't give me any errors just doesn't work.
I've tried every possible link variation I've found online.
absolute_path, relative_path, {}absolute_path, {}relative_path, even just putting the image in the same directory as the scss and linking to it in the same directory. Nothing seems to work.
I'd greatly appreciate any help.
Put images and other shared content for the client in your project's public directory. public gets mapped to / so you can refer to them with <img src='/images/mypicture.png'>
If you want an images directory then put them in public/images and refer to them as <img src='/images/mypicture.png'>
This problem is driving me crazy... I think I've tried every conceivable combination of Sass file, ERB file, asset helper, image helper, etc. etc. Someone please give me new ideas!
Context:
Rails apps require use of asset helpers so that when the assets are precompiled, the source will be a fingerprinted asset file. I.e., if you just called img src="X.jpg", the site in production would look for X.jpg, but the file in public/assets has actually been fingerprinted as X-as;diofua;wemfiwaejfoiawefo.jpg. The only way to get to that fingerprinted file is to use an asset helper, e.g., image_url ('X.jpg').
Right now in my live site, I'm using an asset helper, but for whatever reason, it's not pointing at the fingerprinted asset. Note that the assets are found in development (but again, that's because there's no fingerprint added in development).
Code
Image titled "classic-map.png", located in app/assets/images/galleria
Image is called from a css.erb file required in the application.css file. In the css.erb file, I have the following code:
background-image: url(<%= asset_path 'galleria/classic-map.png' %>);
For reference, http://guides.rubyonrails.org/asset_pipeline.html
Note that I'm choosing to write this as a css.erb file, hence the use of asset_path vs. asset-path. Also, I initially thought that the issue might have been in interpolation, but in the page source, the url is definitely working, it's just that it's pointing at url(galleria/classic-map.png) instead of url(galleria/classic-map-apsoidufalskjf;kasj.png)
A million kudos to whoever can help!
For what it's worth, this happened to be AGAIN, and this time I could not use the hack because I desperately needed the fingerprint. So somehow, magically, I ran a rake assets:clobber and heroku run rake assets:clobber to clean all assets, and then a straight up git push to force Heroku to do the precompilation for me. That did it, and everything works.
Now, when this happens, I clobber assets locally & in production and push, forcing Heroku to precompile remotely. Similar to #user2880239's answer. I have stopped precompiling locally and checking into git.
I sat with a Sr Rails developer who still couldn't help me fix this. But the workaround we ended up using was that we just manually removed the asset fingerprint in the public folder (since the fingerpoint is what the asset helper is meant to point to).
I.e., the file galleria/classic-map-587854758918434124.png we just manually changed back to galleria/classic-map.png and it works fine.
Note that if you do this 'hack', the next time you precompile assets, Rails will create another fingerprinted asset, so you'll have duplication unless you want to keep deleting the additional fingerprinted asset each time. For me, I don't care about the duplication, I care about not thinking about this anymore.
Did you check RAILS_ENV ?
bundle exec rake assets:precompile RAILS_ENV=production
I had the same problem you did. This blog post helped me.
What I did was change a few things in my config/environments/production.rb file, namely...
config.serve_static_assets = true
config.action_dispatch.x_sendfile_header = ‘X-Accel-Redirect’
config.assets.compile = true
Note that you might not need to 'add' any of those properties since they may be pre-set to false or merely commented out.
Then I did the heroku dance:
rake assets:precompile
git add .
git commit -m "Fix static assets"
git push
git push heroku
I'm having the same issue. I even tried the helper from the rails console from heroku, and the helper works fine there!!
$ heroku run rails console
Running `rails console` attached to terminal... up, run.8071
Loading production environment (Rails 4.1.7)
irb(main):001:0> puts helper.image_path("bg.jpg")
/assets/bg-00acfb7dbe138102509d82ac2313c24d.jpg
My final "solution" was to update config.assets.compile = true in config/environments/production.rb to fallback to the non fingerprinted image.
Hope this solution could help to someone. And if you had any real solution, please make me know!
The answer to this for Heroku is in their Pipeline docs here.
By doing clobber you are basically cache-busting all your assets and forcing all clients to reload all static assets (even if they have not changed) every time you deploy your code. That is not advisable as it means every time you deploy ALL clients will experience slow loading times until all assets get cached again.
Your css file has a dependency to your image file, so you need to tell the assets pipeline about this by putting this at the top of your css:
//= depend_on_asset "galleria/classic-map.png"
This tells sprockets that if class-map.png gets a new fingerprint then the css must also get a new fingerprint. So it will only recompile the files (and dependencies that changed).
Also for others landing here, be aware that if you are using asset_path from ANYWHERE other than a view (eg in a model) you need to prepend the full context:
ActionController::Base.helpers.asset_path('your-image.png')
More info here.