I have this folder structure for my next.js project
/public
|static
-hello.png
|sample
-test.js
|charting_libray
|bundle
-dist.js
|hello.png
In my local environment
http://localhost:3000/static/hello.webp
http://localhost:3000/hello.webp
http://localhost:3000/static/sample/test.js
All of these works. This means JS, Image anything can be served from nested folders or directly from the public folder.
But when I build the project using next build command and deployed it to the production.
mydomain.com/static/hello.webp
mydomain.com/hello.webp
mydomain.com/static/sample/test.js
I have noticed only the images files can be accessed and the JS file returns 404.
My real-world use case is, inside a component I pass the path to a library like this
libraryPath: "/static/charting_library/"
I can see a net::ERR_ABORTED 404 error in the prod env browser console. Somehow the library works even with this 404 error.
But I need to know the reason for this 404 error and need to fix in the code.
Any help!
Thanks in advance.
Related
I want to integrate TradingView's charting library in my Laravel project.
I have copied the charting_library folder to the Public folder of Laravel.
After that, I have referenced the charting_library.min.js file from Blade files in view and the other resources related to it.
<script type="text/javascript" src="{{ asset('tradingview/charting_library/charting_library.min.js') }}">
All js files loads successfully, but the problem is that this charting_library.min.js calls an HTML file from a subdirectory where it returns a 404 Not Found error.
http://localhost:8000/charting_library/static/fa-tv-chart.37***ee.html 404 (Not Found)
Here is the file/folder structure:
I have checked loaded resources from chrome's dev tools.
Laravel loads these referenced JS files, but it doesn't load any other files which these files have requested and just returns 404.
The charting_library folder exists in the directory, it's just something related to Laravel. I think it can't see the directory's contents.
I have tried to modify the .htaccess file but still no luck.
I even tried to mix charting_library.min.js via Webpack, changing autoload, but still, nothing happens.
I solved this issue by:
Moving the project to wamp's www folder.
Moving charting_library and datafeeds folder to the root of laravel's public. It seems
tradingview's widget constructor uses relative path's for building
whole chart. So when you place the charting_library inside a folder,
it doesn't resolve other assets. These folders should be exactly in
the root.
When I try to deploy on a iis (win server 2016), a few CSS and scripts reference apears to load with error:
Uncaught SyntaxError: Unexpected token <
enter image description here
This references previously configured in the BundleConfig class doesn't work on deploy, but when I debug locally all works perfect.
Any idea of this?
Often this means that you named your bundles incorrectly. Bundle's virtual path shouldn't match with existing folders on server. So try to rewrite destination virtual path on bundles config.
I'm trying to include riot.js tags into my project so that I can reuse components. The app runs on Node+Express and uses Pug for templating.
I have a route that renders the following page:
include includes/header.pug
link(rel="stylesheet" href="/styles/kaljasakot.css" type="text/css")
body(id='bootstrap-override')
div(class='container-fluid')
div(class='header')
img(class='okklogo' src='img/okkimg.jpeg' height='80' width='130')
h1 Kaljasakot
kaljasakot
script(type="riot/tag" src="kaljasakot.tag")
script(src="https://cdn.jsdelivr.net/riot/2.6/riot+compiler.min.js")
script riot.mount('kaljasakot')
include includes/footer.pug
script(src='/js/kaljasakot.js')
I.e. I'm trying to mount the riot tag kaljasakot in the Pug template. However the browser gives a 404 error in the console on page render:
GET http://localhost:3001/kaljasakot.tag 404 (Not Found)
riot+compiler.min.js:2
I'm a little stumped on where the tag file should be located for the compiler to find it, and I can't find any tips on this from Google. Has anyone come across this case?
The whole project can be found here Github link, if needed.
The tag files are not fetched when the Pug template is compiled but from the browser when the app is running.
Currently you haven't told Express where to find the tag files.
To fix this problem, you can for example create a folder public/tags, move the tag files in there and use them like script(type="riot/tag" src="tags/kaljasakot.tag"). Express will find the files from there because you have configured the public folder as a source for static files.
Now the request won't give 404 anymore, but the tag file won't quite work either.
Since you are using Pug in the tag files, you need to precompile them before the app can use them. If you just drop the kaljasakot.tag to public folder as suggested above, you'll see an error Uncaught SyntaxError: Unexpected token = because Riot doesn't understand the Pug syntax.
So you'll probably want to just keep the tag files in the views folder after all and set up a build step where you compile the tags and move them to the public/tags folder. See Riot's documentation on server compilation and gulp-riot for example.
I am following the code structure generated by yeoman for angular fullstack.
I want to include a script called core.js in file called app.html.
<script src="core.js"></script>
I do not see express.static anywhere in this for serving static files.
I tried using it but it did not help.
It can not locate it and gives 404.
How do I get around this ?
It had happened before as well but I could get around it by using express.static and serving files from location pointed by it.
It did not help this time though.
Update:
I have app.html in folder called Music. In same folder, I have a sub folder called js where I have placed my core.js file that is to be included in app.html. I tried to access it using absolute as well as relative path but did not help and still gives 404.
In angular, the scripts go in the relevant subfolder of /scripts. Either in /controllers, /services/, /directives, etc. You then reference them in your html as such:
<script src="scripts/controllers/core.js"></script>
As for express.static, express is a NodeJS wrapper for HTTP. So that will be the service you create that lives on some Node server remotely. express.static allows the Node server to deliver static content files from the file set at the remote server. It does not go in your angular application.
First time setting up a Yeoman app. I think I understand how bower works... but my app seems to be having trouble finding jquery.js (and perhaps other libraries).
The console message is
Failed to load resource: the server responded with a status of 404 (Not Found) [localhost]/bower_components/jquery/dist/jquery.js
which seems pretty straightforward... it's not linking up properly (duh). I went back into the directory structure of my app, and it looks like there are two /bower_components/ folders.
One of the folders (the one outside of the /app/ directory) only has a jquery folder. The other one (inside the /app/ directory) has all of my libraries and goodies (coffee-script, jquery, ember, etc...).
First: Are there supposed to be two /bower_components/ folders (one for production and one for local perhaps)?
Second: How can I get my app to grab the js from the correct folder?
EDIT:
Please unmark as duplicate. I already saw that question. My .bowerrc file is pointing to the correct directory.
{
"directory": "app/bower_components"
}
You likely have a global .bowerrc. Check for one in ~/, which specifies:
{
"directory": "bower_components"
}
Get rid of that file and see if it helps!