Laravel vite build command do not copy public dir - laravel

I just installed a fresh copy of Laravel 9 and added these lines to vite.config.js
build: {
outDir: '.dist',
}
In Laravel we already have a public folder containing robots.txt and favicon.ico. As per documentation and answers here like this one, I was expecting that "npm run build" will copy the contents from this directory to .dist directory, but this does not seem to happen. I can see only manifest file and assets folder containing js and CSS and no robots.txt and no faviocn.ico. Am I doing something wrong??

Related

Laravel App Not Loading CSS From Public Installation Not In public_html

I've installed a pre-made Laravel app and followed the documentation to extract it to the public root except in the documentation they are installing it into public_html, but I have it in a subdomain in a folder named "test" which is on the same level as public_html.
All the CSS and JS should be loading from the public subdirectory, but they try to look for it in the main root folder.
For example, this file returns a 404 error:
https://test.mydomain.com/css/style.css
The file is actually at this location:
https://test.mydomain.com/public/css/style.css
The absolute path of the file is:
/home/mydomain/test/public/css/style.css
Instead of:
/home/mydomain/public_html/public/css/style.css
What environment or config file isn't set correctly and how do I set it to use the correct directory?
UPDATE
Changing the ASSET_URL to "public" fixed the first issue, but now the same thing is happening with the admin.
The app tries to load the dashboard with this URL:
https://test.mydomain.com/admin/dashboard
The page loads all the assets normally when I remove the word "admin" from the URL:
https://test.mydomain.com/dashboard
But this doesn't work for all the pages.
You can try to put public directory path in below given conflagration file.
Config File Path : config/app.php (asset_url)
'asset_url' => env('ASSET_URL', 'https://test.mydomain.com/public/')

vue init nativescript-vue/vue-cli doesn't generate src folder

I am trying to learn NativeScript-VUE and following this tutorial to connect SQLite to NativeScript.
Following commands were issued.
vue init nativescript-vue/vue-cli-template vuex-project
cd vuex-project
npm install
Everything ended up without any errors.
But vuex-project directory structure doesn't have an "src" folder to go ahead with the tutorial. Should we have to manually create them?
Edit:
The tutorial I am following is https://www.nativescript.org/blog/data-management-with-sqlite-and-vuex-in-a-nativescript-vue-app
I do not know which tutorial you are following. But the command that you are using,that does not create a src folder. You can find App.vue file inside vuex-project/app/components.
You can also have a look tsconfig.json that will show you
"paths": {
"#/*": [
"app/*"
]
},
The tutorial you are referring to, is over a year older. It should have been built on the earlier version of CLI template, the latest version uses app instead of src.

Having problems building github page(SCSS import fails (Jekyll))

I was trying to run a github page with Jekyll theme,and the website runs fine locally. However, when I try to urn in on htttps://username.github.io, GitHub cannot build the website.
I got the following error message :
Your site is having problems building: Your SCSS file myblog/assets/main.scss has an error on line 1: File to import not found or unreadable: minimaless.
The main.scss :
---
# Only the main Sass file needs front matter (the dashes are enough)
---
#import "minimaless";
It seems to be the path to the .scss file expected by GitHub is different from where the Jekyll theme put it. I checked some posts mentioned that I should put the absolute path of .scss in _config.yml file.
It seems to be the path to the .scss file expected by GitHub is different from where the Jekyll theme put it. I checked some posts link mentioned that I should put the absolute path of .scss in the directory of urlbase, which is /myblog. But I am not familiar with ruby, so I am not sure how should I do it.
The folder structure is like this :
myblog/
- assets/
- main.scss
- _sasss/
- minimaless.scss
- minimaless/
- basic.scss
- layout.scss
- hight-lighting.scss
- _config.yml
This is my GitHub page folder :
https://github.com/Po-Hsuan-Huang/Po-Hsuan-Huang-github.io
The issue could be because your source contents are within a subdirectory myblog. Try moving all the contents to the root of your repository.
It could also be because of the following in your config file:
theme: minimaless
#remote_theme: brettinternet/minimaless
theme: minimaless is not supported on GitHub Pages. Comment it out.
And finally, _site directory should not be checked into version control. Delete it from your repository and then add an entry for it in your .gitignore file.

How to add plugin into laravel

I want to add a carousel plugin into laravel.
https://github.com/OwlCarousel2/OwlCarousel2
so I run npm install --save owl.carouse and add following code into index.blade.php
<script src="/node_modules/owl.carousel/dist/owl.carousel.js"></script>
The owl.carousel.js is inside my project, but when I run npm run watch, and look at the browser, there show an error in the console:
GET http://127.0.0.1:8000/node_modules/owl.carousel/dist/owl.carousel.js 404 (Not Found)
Why is that?
You should not import it through a script tag. Add it in your bootstrap.js file
require('owl.carousel');
require() will use the node_modules as the root dir
You can of course use require in any other .js file that you then import through a script tag.
If you are using VueJs you do at the top of the vue component
import owl from 'owl.carousel'
Your web server does not have access to node_modules directory.
You'd better use gulp to copy and bundle it to public directory.
Or else if you want, you can do it manually. Copy the script to the public directory.
I usually make asset/js directory under the public and then copy owl under it.
You will have:
<script src="/asset/js/owl.carousel/dist/owl.carousel.js"></script>
Add this line in your main .scss file:
#import '~owl.carousel/dist/assets/owl.carousel.css';
Compile the css with npm run dev
You can repeat these steps for your javascript files
Edit:
If you do not make use of Laravel mix yet, read this documentation first. https://laravel.com/docs/5.6/mix

How can I push my package's assets into root directory?

I have a package with some assets.
vendor/package/src/assets/css|js|img etc.
How can I move those assets into root directory after installation or updating?
Also, the second question is, can I do this task with PHP? For example:
Route::get('update/{package_name}', function() {
//Trigger composer here
});
Thank you.
there is an artisan command for that
php artisan asset:publish vendor/package
for this to properly work, you'd need to put your assets into a public folder within your vendor package like vendor/package/public/(css|js|img|...) and everything will be published to your root under public/packages/vendor/package/(css|js|img|...).
you can specify a path from the root, if you're not using the public folder:
php artisan asset:publish vendor/package --path="vendor/vendorname/package/src/assets"
docs: http://laravel.com/docs/packages#package-assets (although the path parameter is not mentioned there)
I think what he wants is a different destination folder not the source folder. --path is useful when you have a different source folder I believe.

Resources