Website Not Functioning Properly After Building for Production
I've developed a Recipe website using HTML, CSS, and JavaScript with Vite. During development, everything was working fine. However, after building the project for production, the application has stopped functioning correctly. Specifically, the issue arises when navigating to different pages. For example, on the blog page, the CSS doesn't seem to apply, and the same problem occurs on the displayRecipe.html page where both CSS and JavaScript are not functioning as expected.
Specific Issues:
CSS not applying on certain pages
JavaScript not functioning on certain pages
Project Structure: https://i.sstatic.net/mdzgtzmD.png
Project Link: https://github.com/jfmartinz/FindRecipe
After building the project for production, CSS styles are not applying correctly on certain pages, and JavaScript functionality is not working as expected.
You can watch this video in Loom for better understanding: https://www.loom.com/share/bd472bc40b834faba4e9c956eb483bb8
Additional Information: I Suspect that the issue may be related to the website's structure or the absence of a vite.config.js file.
P.S. I just want to know if the problem is becacuse of the structure or not, or something else, please I need some idea.
GitHub
GitHub - jfmartinz/FindRecipe
Contribute to jfmartinz/FindRecipe development by creating an account on GitHub.
6 Replies
you're right, 99/100 this is a path issue. Check if the CSS is loading on those pages by looking at the network tab in the dev tools
it says 304.
while script is 404
Do you think the structure is the problem?
it's how you refer to the files that's the issue. 304 is not a problem, it just means the server is informing the client that the resource doesn't need to be refetched
404 means that the browser requested the script in a place where it wasn't
Yea script is not working. Not found
thats in production