I'm using symfony 5 and i just removed the encore-bundle because I was having an error with a manifest json file but when i integrated a bootstrap template, no css or images or javascript is shown even though the routers are correct and the files do exist. what might be the problem?
Related
I work on a single-page application written in Vue.js 3 and built by Vue CLI 5 (Webpack 5). The app is being served from a Laravel app which is deployed to AWS by Laravel Vapor. This tool also uploads all static assets (including JS chunks) to AWS S3 and make them available via CloudFront.
I want to load all static assets used in the Vue.js app from this CDN. The URL of the CloudFront distribution is available at build time in ASSET_URL environment variable. I have written my own asset functions in both TS and SCSS which are able to resolve asset paths properly for both local development and production environment. I use these functions whenever I write a URL of a static asset (image, font, etc.) in either .scss or .vue file and everything works fine.
But I am not able to make Vue.js app load JS chunks from CDN. When I modify publicPath option in vue.config.js, Vue Router gets broken. If I try to change output.publicPath directly in Webpack config, I get an error from Vue CLI saying that I cannot modify it directly.
So I have written a script that rewrites all URLs pointing to static assets in the generated index.blade.php file (similar to index.html in a typical Vue.js project) and initial JS chunks are loaded from CDN now. However, all lazy-loaded chunks are still being loaded from the server where Laravel app is deployed. It looks like these paths are somehow defined the generated app.f73fadef.js file.
So my question is, how can I load all static assets (including JS chunks) from CDN while serving an app from a dynamic web server? Is it even possible to do this just by changing Vue CLI or Webpack config and without any dirty "hacks" (like modifying generated JS files)?
I have finally been able to solve this. The problem was caused by the following router initialization code:
createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
Once I remove the parameter of createWebHistory function, I was able to set publicPath option in vue.config.js to my CloudFront distribution URL and everything started to work properly. I was even able to remove my own script that changed the URLs in index.blade.php since it was no longer needed.
I have an application which has developed on laravel 5.7 and it's index.php is moved to root directory. Now when i tried to make the server up using php artisan serve command.
The website was loading but assets files like css and js not loading. Entire console showing errors and when i tried to see the asset file code through http://localhost:8000/assets/js/app.min.js
It was showing Error 404
The page you are looking for does't exist.
Can any one help me i am trying to resolve from past two days
Entire app is loading only view is not proper due to non loading of asset files
I am trying to use CKFinder 3 hosted on IIS on the local html file. But I am getting the following script error
I tried to dig in the source code. and what I found is, the language file (en.json) is getting loaded by script tag with type attribute as text/javascript which is causing the error. Can anyone help?
Such error is usually displayed when you have CKFinder installed on one domain but you try to use it or reference it on the other.
CKFinder doesn't allow that and currently it doesn't have a built-in support for cross-domain messaging. You need to use CKFinder on the same domain where is has been installed.
I have replaced index.html file of metronic with the index.html file of angular-seed-advanced (src/client) also I have dropped my metronic code inside the client folder but after running the code I am “Parser blocking cross site error”.
Can you please check our Metronic code (angular) which needs to be merged in angular-seed-advanced.
Below is my git url by which you can check my angular code of Metronic and also I am sharing documentation of Metronic.
One more question, can we please use Angular 4 in angular-seed-advanced.
Metronic code git: https://github.com/Jeremywhiteley/MedTexterNative/tree/11-10-2017/angular
Metronic Documentation: http://keenthemes.com/metronic/documentation.html
Snapshot of error: https://screencast.com/t/aPPFvlsJnr6
I am using laravel 5.3 with angular 2 for my project and using webpack for compilation of the assets including js and css.
I am trying to use same font awesome and bootstrap for the client and admin area.
I have the folder structure of laravel with everything inside js directory.
|-public
|-js
|-assets
|-fontawesome-webfonts.woff
|-image1.png
|-vendor.bundle.js
|-polyfill.bundle.js
For Angular 2 routes we need to add the base href to the main template which i have also added.
<base href="/">
Admin url is localhost:8000/admin
and user url is localhost:8000
I have included the bundles like
{!! Html::script('js/vendor.bundle.js') !!}
and the vendor have imported the less files as:
vendor.bundle.js
import 'admin-lte/build/less/AdminLTE.less';
import 'font-awesome/less/font-awesome.less';
The main issue is that when i use the same vendor.bundle.js to both user and admin pages the user page works fine since it loads the fonts from js/assets/fontawesome-webfonts.woff but when i load the admin page it couldn't load the fonts as it searches from admin/js/assets/fontawesome-webfonts.woff which is not the correct directory.
How could i make Angular search into js/assets/fontawesome-webfonts.woff for both url?
The issue is displayed in the image too.
I just figured it out by myself using the url-loader webpack plugin.
You should leave the base href to as it is and configure the assets.
I just needed to add a new test only for the fonts
{
test: /\.(svg|woff|woff2|ttf|eot)$/,
loader: 'url-loader?limit=10000&name=assets/[hash].[ext]&publicPath=/js/'
}
You need to specify the publicPath and add the other directories to name.
That's all. Hope it will save someone's precious time.
Note: don't forget the '/' at the front of the public path