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.
Related
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.
I want to dockerize my vue app, but when I run it in a docker container nothing is loaded in the browser.
Since I run CMD["http-server", "dist"] in my Dockerfile, I decided to test it out locally to troubleshoot the issue.
Running:
npm run serve
Works fine and I get:
Then I run
npm run build
I believe this is due to having a posters folder with 50,000+ jpeg images in the assets directory which I dynamically display in the app as follows:
<div v-for="movie in this.recommendations" :key="movie" class="movie-card col-md-2">
<img v-if="movie['poster']=='True'" :src="getImgUrl(movie['movieId'])" v-bind:alt="pic">
And the getImgUrl function is:
getImgUrl(imgName) {
var images = require.context('../assets/posters', false, /\.jpg$/)
return images('./' + imgName + ".jpg")
}
vue/cli suggests
webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
but I'm not sure how to implement either one of these or
if hosting the images on a public google drive and importing them from there would solve the issue?
Pretty new to vue so any help would be much appreciated!
By using the assets folder and using require you are bundling all of your images into your code, by encoding them as base64. So when it is compiled it is creating GIANT chunks. Because the images are compiled into the source.
What you should do is move your images from assets to the public directory. Then load the images via HTTP. This means that your code and images remain separate. When the page loads, the browser requests the images separately from your code, and loads them into the file.
For example
<img v-if="movie['poster']=='True'" :src="getImgUrl(movie['movieId'])" v-bind:alt="pic">
getImgUrl(imgName) {
return `/posters/${imgName}.jpg`
}
Thus your directory structure would become
-public
-|--posters
-|--|--Poster1.jpg
-|--|--Poster2.jpg
-|--|--Poster3.jpg
-|--|--Poster4.jpg
etc
The public directory overly simplified acts as a webserver. Anything that is in it can be accessed directly. For example, if you were to move your images over, to the public directory, with the directory structure above, and access localhost:8080/posters/Poster1.jpg, it would load just the image, without even needing a Vue router.
For a better, in-depth description of the public folder, and the role it serves check out the docs.
I have a VueJS webpack generated project in which I want to link the jQuery & Bootstrap libraries. I've downloaded the sources and want to link the JS & CSS into my HTML file like so:
<script src="/assets/js/jquery-3.2.1.min.js"></script>
The HTML file is in the same folder than the assets folder.
My problem is that the script doesn't load and I have this error:
"Failed to load resource: the server responded with a status of 404 (Not Found)"
None of the solutions I found for this problem leaves me satisfied, people use another file containing some sort of module declaration, but I think it's a bit overkill to have such files when it's only for linking a script file into an HTML file...
So the index.html is in the assets folder?
Won't it just be this then:
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.
I'm using a local webserver to serve a simple, static html page. The project has the following folder structure:
/site
/build
index.html
/bower_components
Index.html is accessible on http://localhost:5455/. In index.html I am loading some assets from ../bower_components:
<link rel="stylesheet" href="../bower_components/normalize.css/normalize.css">
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
But neither firefox or chrome seem to be able to load resources from this parent folder. I get the following error:
Cannot GET /bower_components/jquery/dist/jquery.min.js
So it looks like it isn't looking in the parent ../bower_components, but in build/bower_components, which obviously isn't right. Why is this, is it some sort of security protocol? And how can I correct this?
If your server is mapped to the build folder, you will NEVER be able to access parent folders, for obvious security reasons!
Some solutions are:
1 - Map your server root to the site folder
or
2 - Put the bower_components folder inside the build folder
You did bind the /build folder to the root of the web server.
You have to bind the /bower_components to some sort of web served address before attempting to reference it in HTML.