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
Related
I am making some project with Laravel, Vue2 now.
I deployed my project onto the test server, there .svg files display, but in my local environment they don't display.
I use :src="asset('images/ico_arrow_left1.svg')" in vue component.
My images and svg files are all in root/public/images folder.
For example; I wrote the following code to display svg in vue component.
<a #click="previousDay"><img class="ico_ico_arrow" :src="asset('images/ico_arrow_left1.svg')"></a>
The codes are sampe in test server and local.
show in test server, but not show in local, why?
If you want import a file from public folder you should check the documentation. You should use require when you import dynamic asset. Like this:
<img class="ico_ico_arrow" :src="require('images/ico_arrow_left1.svg')"/>
The asset() helper function is only for the Laravel Blade template. you can't use it inside of a regular Vue application.
In Vue, you should use require()in order to solve this problem.
I am working on a small nuxt website for a client, i havnt been using nuxt for very long but so far what i do is add target: "static" to the config when i'm ready to build for production, then send the dist folder to backend for deployment, but now i notice that after i run npm run generate images and others assets like js files do not get added to he page.. i have tried to create a new dummy project just to test, chose static mode when setting up the project, added 1 image to the project and display it in index page using
<img src="~/path-to-file" />
the image will appear normally in dev server, will also appear if project is hosted on netlify, but will not appear in git-pages or local apache server
i am confused on why this is happening, typically adding target static fixes issues like this but not this time, please help
There are two main ways to display images through nuxt. One via the assets folder, the other via the static folder.
Any images in the /assets folder will be bundled with webpack. These images can be referenced using:
<img src="~/assets/image.png"/>
If you do not want images to be bundled by webpack, then save them in the /static folder and reference using the following format:
<img src="/image.png"/>
Currently, you are using ~/ , which is shorthand to the base directory. Once you build your site for production this will no longer work, because the structure is transformed - which is why there is a discrepancy between your environments.
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 installed laravel 5.6 and used a template i purchased from themeforest. I have all the css and js files in version1 folder (public/version1/app.min.css and public/version1/js/app.min.js). Then i modified the template as per blade rules and the website renders good. I want to use a javascript framework for frontend with this template for creating SPA applications so that i can view other pages without refreshing. I checked react, loved it however i see vue is good too with laravel.
I ran php artisan preset vue and npm install && npm run dev
Are there any other steps im missing? I have searched alot and couldn't find a single resource on how to use a template (purchased) with vue and laravel.
Any links to get me started would also help me. I have the links for creating crud with vue.
Followed this link and made the following changes
I placed all the css files in resources/assets/css folder and all the js files in the public/js folder.
Updated the webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js')
mix.styles([
'resources/assets/css/app.min.css',
'resources/assets/css/primary.css',
'resources/assets/css/style.css'
], 'public/css/app.css');
Now everything is compiled into public/css/app.css and the theme is rendered without any issues.
I've seen this question come up a lot;
How do I put images on my Meteor website?
How do I host "standard" web content with Meteor?
I tried adding a <img src="img/myimage.png"> tag but no image shows!
How can I host some files on a Meteor site?
Put the content in a folder named "public" in your project root.
You do not need to include /public in your URLs.
Any additional folder structure within public is supported.
NodeJS routing plugins are not required, as other answers have supplied.
Place external library's javascript files in /lib. They will be automatically included.
Explanation
In Meteor, you can host "standard" web content by creating a "public" directory in the root of your project. Any images, files, or data you place in this folder will be served as normal by the NodeJS server, as if they were in the root of the server.
Example
Structure within project: /public/test/img.png
Corresponding image URL: /test/img.png
Example HTML tag: <img src="/test/img.png"/>
Create a new folder public inside the project directory. Add a new folder img (or any other name of your choice) inside the public folder. Copy all the images that you require to be added in to your HTML into this folder.
Now you can use it like - <img src="img/myimage.png">
You don't need to include /public in the in the URL.