I have an html template, so I want to use that with my vue.js project, when my project load for the first time all js and css assets are loading correctly, But when I go to some route, for instance to about route from home the assets are not loading correctly in about route, and I when come back from about to home route also the assets are not loading correctly, so how to solve this problem in vue3
Related
The Next.js documentation states, that the directory src/pages is an alternative to /pages. However, my custom _app.tsx and _document.tsx files, get ignored when the pages folder is moved into src.
You can recreate this issue yourself, when creating an empty Next.js App, moving the pages folder into src and updating the import paths of the css files. The content of the index.tsx file will still be rendered, but modifications to the styles/globals.css, which is imported in the _app.tsx will have no effect.
It is impossible to have a pages folder inside of src and outside of src at the same time, therefore preventing me to use src/pages in any app which needs a modificaton to the _app.tsx or _document.tsx.
Am I missing an important part of the documentation or does this work as intended?
Changing your project folder structure or adding new _app/_document files can sometimes lead to caching issues.
Delete the .next folder and restart your dev server, to ensure any caching done by Next.js doesn't get in the way.
I need to put the generated static files from a vue build inside a WordPress page, in theory, it should've been an easy quest, but the static files "have a problem" with the paths to resources like assets, CSS files, and js files.
Example: If you build a Vue project and open the index.html on the live server (vscode extension), the page will be fully white and the developer's tools will show that the resources were not loaded.
Failed to load resource: the server responded with a status of 404 (Not Found)
Looking at index.html, I discovered that if I add a "." in front of the paths inside every href, the resources a loaded.
Basically, if I change this
<link href=/css/chunk-vendors.fb624d12.css rel=preload as=style>
to this
<link href=./css/chunk-vendors.fb624d12.css rel=preload as=style>
The chunk-vendors.fb624d12.css file will be loaded. But this is a very impractical solution because I have many CSS and js files, so I really want to find an optimized solution for this.
We created a landing page in Webflow and exported the code. We now have a HTML, CSS, JS and images from this export.
Our app is built with Next JS and hosted on Vercel. I would like to serve the static site above from certain routes like /, /pricing, /about, etc. and our own app on others.
We've looked at custom server on Next JS but that's not compatible with Vercel. Also looked into Rewrites but that has lower priority than static pages, so won't work.
We used to have a Node app and could just direct certain routes to serve static HTML and other routes would point to our React app. Not sure how to do this in Next JS. I'm hoping to have a similar setup with Next JS, but can't seem to figure it out after a lot of searching.
What is the best way to host our static Webflow site at the root and certain other paths in a Next JS app?
Figured out how to do this with Rewrites.
Export your landing page from Webflow or any other landing page builder. Put it in the /public folder of your Next JS project. Rename the index.html of your landing page to something else like landing.html. Rename pages/index.js.
The order of execution in Next JS for choosing what to display is:
File in public folder
File in pages/
Rewrites
So we removed index.html and public/index.js so that our rewrite can handle it.
Add the following rewrite to your next.config.js
{
source: "/",
destination: "/landing.html"
}
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?
May i know does iron router async load templates from server only when required or download everything in bundle at first page load.
Meteor compiles all of your template code into javascript which is then shipped to the client in a single file in production, or in multiple files in development mode. Those files are then downloaded and interpreted on the first page load (or whenever there is a hot code push). There is currently no notion of incremental loading, however it is on the roadmap.