First post.
I'm currently building a Laravel Nova application. I'm making changes to the dashboard component - more specifically the file within the "resources/js/views/Dashboard.vue".
I'm struggling to build the component - does anyone know how to build the component? I have some code which runs webpack.mix to build my JS and SCSS files, but I'm pretty sure it doesn't include the files within the Laravel Nova instance.
Any help will be great.
EXTRA:
I've already tried run the webpack command to build from inside the Laravel Nova instance but it errors out.
UPDATE
I found renaming my webpack.mix.js.dist to webpack.mix.js, running npm run dev whilst within the ./nova directory worked... but only after running php artisan nova:publish
I've wrote a command to compile all these steps but do I have to run php artisan nova:publish everytime, just seems...tedious?
By default, Nova's JavaScript is compiled for production. As such, you will not be able to access the Vue DevTools out of the box without compiling Nova's JavaScript for development. To accomplish this, you may use the following terminal commands from the root of your Nova project:
cd ./vendor/laravel/nova
mv webpack.mix.js.dist webpack.mix.js
npm install
npm run dev
rm -rf node_modules
cd -
php artisan nova:publish
Details: https://nova.laravel.com/docs/2.0/customization/frontend.html#vue-devtools
Related
I'm following this video tutorial (in spanish), which shows how to implement Jetstream with Bootstrap instead of Tailwinds: https://www.youtube.com/watch?v=Wt-OuBX6lEc&list=PLZ2ovOgdI-kWWS9aq8mfUDkJRfYib-SvF&index=31
The issue is this one: despite I've followed the steps strictly, I'm getting two important errors.
First of all, I should have a file named "app.css" into my folder "/public/css", but I don't. I don't have even a folder named 'css' into the 'public' directory, neither another lots of folders I should.
On the other hand, both my welcome view and my register view look ugly, like this:
The commands I've done are these ones:
Into:
leandro#leandro-Lenovo-B50-10:/var/www/html$
laravel new bootstrap --jet
cd bootstrap
Then,into:
leandro#leandro-Lenovo-B50-10:/var/www/html/bootstrap$
composer require nascent-africa/jetstrap --dev
php artisan jetstrap:swap livewire
npm install
npm run dev
php artisan migrate
sudo chmod -R 777 .
Also, the register view shows an error, unless I have activated VITE (with npm run dev).
Somewhere, I had to do a 'php artisan migrate:fresh', because a migration error.
I'm running the project into an Apache server.
I'm using:
Linux Mint 21 Vanessa
Apache/2.4.52 (Ubuntu)
PHP 8.2.1
Laravel v9.50.2
Does anyone have an idea of what's going wrong? It might be a conflict version, since I'm using Laravel 9, while the video is explained for Laravel 8.
I don't know if there's any additional information needed.
Thanks a lot!
I have installed Tailwindcss on Laravel 9 and the problem is that whatever I change in the code in the blade.php files, Tailwindcss does not work. Only when I run npm run dev and refresh the page, the effect is visible.
Why after each code change in laravel blade files I have to do npm run dev otherwise tailwindcss does not work as if it does not recognize its classes.
Run npm run watch to watch for changes and recompile your styles and scripts when you save.
The npm run watch command will continue running in your terminal and
watch all relevant CSS and JavaScript files for changes. Webpack will
automatically recompile your assets when it detects a change to one of these files:
Read more about it here:
https://laravel.com/docs/9.x/mix#watching-assets-for-changes
the error is
#php artisan vendor:publish --tag=laravel-assets --ansi --force No
publishable resources for tag [laravel-assets].
This is not an error With the laravel.
With the relase of Laravel v8.5.23 they have added a command to post-update-cmd inside composer.json. So when ever if you run a composer update. Laravel will publishes the latest assests of the package that is created by them such as horizon and telescope.
So when they make changes in assests in above packages and tagged a release. You can use it by running the composer update command. But the changes made to vue files and styling will not be changed. You need to run the publish command manually. So to fix that they have added tags to those packages and whenever you run a composer update command it will automatically publishes the assets which are tagged as aravel-assets.
The reason you are getting No publishable resources for tag [laravel-assets]. message is either you haven't installed any of the package that uses the tag laravel-assets or may be not update in the assets.
You can view the PR's here
laravel/laravel/pull/5654
laravel/horizon/pull/1045
laravel/telescope/pull/1105
I am using Vue in laravel. When I make changes in vue code these changes doesn't appear until I run this command:
npm run production
I want to use vue without this command or at least one time should be enough
The Vue code that you write must be transpiled to vanilla javascript so that most of the browsers out there can understand it (not all browsers understand Vue or the underlying javascript version, such as ES6).
Additionally, most likely the code you write has many dependencies (including Vue itself) but also many other libraries. npm run generates a single javascript file with all the necessary code to run, but also stripping out all other portions of libraries that you don't use. If this didn't happen, it would take a lot of time to your page to load because the browser would need to load all the libraries.
You can simply run npm run watch to keep building vue into vanilla javascript code as you are working on vue components.
What does npm run watch does exactly?
In package.json file in the root folder of your laravel project, you can see that there is a script of "watch" which then runs npm run development -- --watch. Here, --watch part is important. npm run development compiles or builds vue components into ./public/js/app.js and also creates css styles in ./public/css/ corresponding to the styles that you apply inside vue components tags.
./public/js/app.js and ./public/css/*.css files are then included in php blades and it serves as vue components.
Using npm run development is recommeded while you are working on your local dev environment rather than npm run production, which command itself implies that it builds production version of vue components. In production version, vue-devtools cannot inspect vue components but it does in development version.
And as --watch part keeps its eye on vue components' chages and it builds as soon as you make any change in .vue files. So you run npm run watch once, you are good to go. No need to run npm run development or npm run production every time.
To update our code on port id need to run npm rum production command
Is that possible to completely remove node_modules folder from laravel app and not using it?
My app doesn't require any npm packages and I'm not using echo or pusher or any other API's that requires npm packages, then
Is it OK to remove this unnecessary folder in my app or somehow laravel
needs it to work?
If your project doesn't require node packages then you can remove it, it's not necessary to run Laravel project. But if you're using VueJS, or NodeJS then you need it.
composer update not download node packages, it only installs packages in vendor folder, node_modules is different which includes node packages.
If you want to install node packages, then use npm install command to install it again.
Hope this will helps you!
It is safe to remove the folder. The normal workflow would be to compile all CSS and JS files before deployment and copy them to the public/ directory, rendering the node_modules/ obsolete for deployment.
If anything breaks after you removed it, you can still bring it back with npm install.