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
Related
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.
We got a wrap bootstrap theme call ace admin. We are trying to integrate the theme into meteorjs.
The structure of the ace admin files folder is:
assets
avatars
css
fonts
images
img
js
build
demo
files
lib
several javascript files here (*.js)
dist
avatars
css
fonts
images
img
js
By following the tutorial here
I moved all the static content such as images, fonts, etc to client folder, javascript related folders - (assets, build, dist and all the related content) to public folder.
The problem that I am facing it - Meteor is not loading the javascript files inside the public folder.
Could someone help? Thanks.
Edit:
Ok. Finally. Thanks to #Ethaan. After spending almost 2 days figuring out what the problem- its with the javascript loading dependencies. If anyone is facing similar problems - make sure you load all the dependencies first and then load other files.
Do everything in the link provided in the above url that I mentioned and then move all the js folder files to client.
You should know some things about meteor structure, You can read docs
/lib folder its where you put the code you want to share between server/client, code like Routes,Collectios or other code ho is available on server/client(if you put code which use "window" object you will have issues, since windows objects its undefined to the server.)
/publicfolder here is where you put the images, logos, fonts, etc (you get the idea)
/client folder here is where you put the code which will be available only to the client
/server here is where you put the code only available on the server
I recommend you to read the docs, this was just a quickly explanation.
I have build MVC 5 application which works fine when running via VS. When I publish it to the server first time it also works. Now I have made few correction to my css file and publish whole project again but website still see the old css file. I have removed all files from the server and tried few more times but it is still the same. When I check the css file on the server, the changes are inside the file.
I think it is related to MVC bundling as when I check the source it says that is accessing different file which is not even located on the server:
<link href="/Content/cssmain?v=Ikj7NnMg3q9kTHR7ynWOJDQFGMZl3mtVMi_2EkOJxc41" rel="stylesheet"/>
How can I force VS to minificate my css file again?
I've tried cleaning, rebuilding but no luck
Edit:
My bundle set up look like below and all files are located on the server in Content folder.
bundles.Add(new StyleBundle("~/Content/cssmain").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/ilightbox.css",
"~/Content/bannerscollection_zoominout.css"));
Many thanks
I think it is related to MVC bundling as when I check the source it says that is accessing different file which is not even located on the server:
CDN location? External Css lib (yours or 3rd party)? unsure what you meant by "not located on server"?
Yup, it does (look like ASP.net Bundling in action) - check your Global.asax, App_Start/BundleConfig or _AppStart and see if the bundle configuration setup point to/reference the "correct" locations for your css (and or script).
Is it just you experiencing getting the old css file loaded? Or anyone who views the site?
This can be a silly question but I have had some issues with it. I am trying to implement jwplayer with meteor. Jwplayer will try to get a file based off the url you suggest. So I tried to place a file in localhost:3000/test.mp3. When I tried to hit that url I get just the default site. This would work if I used tomcat. Is there something I can do to get the files relative to meteor directory?
Thanks for your help.
In the /public directory, per the docs:
Lastly, the Meteor server will serve any files under the public directory, just like in a Rails or Django project. This is the place for images, favicon.ico, robots.txt, and anything else.
Meteor hasn't yet implemented server side routing and all directories are ultimately flattened. So for the time being, you can access your file at http://localhost:3000/test.mp3, but that may change in the future.
I'm new to Meteor and I'm trying to understand how to serve static content - images, JS, etc.. I've followed the docs by creating the correct folder structure (which it doesn't really touch on) but making requests to this content just fails over to serving the main app page instead.
For instance - putting an image in "app_root"/public/image.png and making a request to localhost:3000/image.png just returns the main app page.
Any clue what I'm doing wrong here?
Thanks!
The setup you have described sounds correct to me. Media in public/ are served like
http://localhost:3000/myphoto.jpg
The todos example serves images from the public directory. Just back out of whatever project you're in and run: meteor create --example todos then cd into todos/ and run meteor. Then open:
http://localhost:3000/destroy.png
The image you will see lives in public/.
Meteor public folder not working
Use ./public directory for serving static assets.
Given the following directory structure:
- server
- client
- public
- css
- bootstrap.css
- images
- js
You could serve the static assets by dropping 'public' from linked documents.
<link href='/css/bootstrap.css'>
More info here: Official Meteor Docs #FileStructure
Files in /public are served to the client as-is. Use this to store
assets such as images. For example, if you have an image located at
/public/background.png, you can include it in your HTML with or in your CSS with background-image:
url(/background.png). Note that /public is not part of the image URL.
That same thing happened when I moved the project files in a folder and forget to move the directory .meteor.