nextjs css not loading for static pages - next.js

We are running nextjs build with yarn , pm2 and then using nginx to proxy the port.
I can see a build number inside .next/BUILD_ID and .next/static/BUILD_ID/_buildManifest.js file.
But in UI when taking this domain.com/_next/static/BUILD_ID/_buildManifest.js showing 404.
This issue happending only for server render pages.
We have other client side render pages and those are working but with different BUILD_ID name and not sure how its working.
Tried to delete .next folder and taken build again. But still issue is there...
Any suggetion how this can solve ?

Related

Favicon not working for app served by nginx that is deployed in Kubernetes

We are having an issue getting our favicon to show up. Little background on the app setup. The application is a React app that is served up by Nginx. We did have to make a change to the default.conf file to add a location block to for an alias with the path to the favicon to get it working in Docker. So, from Docker the favicon now shows up just fine when ran locally, but when deployed to our K8s the favicon no longer shows up. I did test with private mode/incognito to make sure it wasn't a caching issue.
Favicon is located in the root of the app along side the index.html.
I haven't been able to find anything that has really helped with resolving this issue, but I do believe I need to reference either the nginx's conf file or the favicon in the deployment yaml.
Has anyone ever dealt with something similar to this before or have any ideas?
Turns out for this scenario. Since the browser tab was opened by another application, it was the path to that apps favicon I needed. For some reason it was trying to look in that folders directories. Doesn't make a lot of sense why it would to me but it is better to have one source.

Next js + Firebase wouldn't work on Netlify

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!

Vercel host: Next.js site not serving my static files

I've built out a new site in Next.js and have deployed it on vercel.com (their free Hobby plan).
Everything works except that I built out some sample pages and put them into /public (as instructed by the Nextjs docs) so I have a directory structure as follows:
/public/demo/gencenter/gencenter.html which I'm expecting to be visible on
https://cfsnap.com/demo/gencenter/gencenter.html
but I'm getting a 404 (the console reports "failed to load resource.... 404")
Anyone know if a Next.js has any handles I should jiggle to make static files load? For giggles I put a few image files in the /public directory and I can call them directly and they appear as expected:
https://cfsnap.com/demo/gencenter/swimCalendar.png
I read about naming conflicts in the Next.js docs but "gencenter.html" is unique and doesn't exist anywhere else.
Any help would be greatly appreciated.
Rich
Vercel uses clean urls, causing the file "index.html" to be renamed to "index". When I updated my internal links to point to "index" everything started working again. Only applies to html files apparently, CSS and image files remain unaffected.
https://vercel.com/docs/configuration#project/clean-urls

Loading ReactJS on asp.net view issues with image path

I'm trying to load a React app onto an asp.net view (project was initially written in asp.Net, am creating new pages using React for learning purposes and for fun).
When the React app is running in dev move, all images load without any issue with all pathing working.
After building the app using npm run build, the js file and corresponding image files are generated and I place them on a folder on my asp.net application (e.g. Scripts folder).
When I try to view the page, the React app loads and the screen is rendered, but the images are all broken as the website can't find them.
After looking to see why the images aren't loading, they're getting a 404 not found error due to the images trying to be loaded from the current URL, rather than where the js file and images are stored.
For example, the view which loads the React app is on https://localhost/Home/ReactPage
And ReactPage.cshtml has the following in it:
<div id="thisIsTheReactDiv"></div>
<script src="/Scripts/ThisFolder/app.js" type="text/javascript"></script>
The React app js is in the Script folder in the project, so to access it, the src has been put as shown above. To access the image you'd have to do something like https://localhost/Scripts/ThisFolder/image.png
At this stage what it's doing is the image is being linked to https://localhost/Home/ReactPage/image.png which causes a 404 error.
Are there any webpack configs that can be done to make it point to a specific path before it gets built?
Is there any way to make the React app when building for PROD update the image relative paths so it looks at a specific folder rather than trying to get it from the current path?
Alright, after a few hours of searching (which lead me to post this question), I've figured out how Webpack works with relative pathing now.
Looks like there's a section called "publicPath" in the output setting where you can type in to get the path relative to where your React JS file is deployed at.
So it looks like typing in
publicPath: "/Scripts/ThisFolder/",
will make the relative path to start from there so all images will load from that URL.
As seen from this Stack Overflow link: What does "publicPath" in Webpack do?

Deploy Vue.js app to Apache server

i need some help. I wrote an SPA using VueJs. I ran "npm run build" so i can test my app on my Xampp server. The build generated a "/dist" folder. I changed the index.html in the dist folder to index.php. I tried serving the dist folder with Xampp but it shows a blank page. Please help. I have uploaded the image showing the errors
https://i.stack.imgur.com/ae7GM.jpg
I had the same issue; a bunch of 404's in my console after running
npm run build. Ceejayoz is correct in suggesting you take a look at your network tab to see where the server is expecting to reach the file.
His suggestion tipped me off that my application did not have a base URL set.
Vue's docs on this.
After setting the path my app was located at, I reran the build process and it came right up.
dist files can only be served via http, you have to deploy it to your hosting server before you can see the output of your vue app

Resources