How to run/develop laravel + vue.js (laravue) app properly - php

before i start, i need to say that i'm aware that this question is a beginner's one.
I've found this dashboard combination of Laravel and Vue.js that i wanted to play with, to then start developing a real web application. laravue
There's just a single question that is confusing me: while testing it on xampp with the commands "npm run watch" and "php artisan serve" i see myself obliged to npm run the project, every time i make a file change.
So what is the right way to check all the changes i make? By just refreshing the browser window.

Thank you for all the responses.
I've solved the problem by running "npm run watch" and "php artisan serve" on two separated command-line windows.
Was totally unaware of that and it's part of the learning curve.
Thank you, this is now solved.

npm run watch automatically builds your assets and then watch any save on the concerned files. Whenever a save happens, npm run watch rebuilds everything, but you won't be aware on your web browser except by refreshing.
P.S: Sometimes npm run watch does not work well, then use npm run watch-poll instead
https://laravel.com/docs/7.x/mix#running-mix

npm run watch or npm run watch-poll will automatically rebuild your assets but don't apply to the browser without manual refresh. Meaning you have to reload browser after compiling done.
Hot Module Replacement(HMR - or Hot Reloading) works same as npm run watch and apply changes to browser automatically, so you don't have to reload browser to see the changes.
Following this document, HRM works well with the fresh installation (latest code on master) as my test.
npm run hot result:
➜ npm run hot
> laravue#0.11.0 hot [src]
> cross-env NODE_ENV=development BABEL_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js
ℹ 「wds」: Project is running at http://localhost:8080/
ℹ 「wds」: webpack output is served from http://localhost:8080/
ℹ 「wds」: Content not from webpack is served from [src]/public
ℹ 「wds」: 404s will fallback to /index.html
php artisan serve result:
➜ php artisan serve
Laravel development server started: http://127.0.0.1:8000
And browser:

Related

php artisan serve vs. npm run dev - difference between both servers?

I just started to learn more about Laravel and I am confused about servers. When I run 'php artisan serve' in my project's folder, I can access my web project via localhost:8000. When I run npm run dev I can access via localhost:5173 - but I am not directed to my web project's landing page but to the welcome page of Laravel Vite. For me running 'php artisan serve' is the right option. So, now to my question(s): Did I do some kind of misconfiguration when setting up the project? Where is the difference between those two servers? Thank you for your answers! Robert
Php artisan serve - hosts your project on your local server. And 'npm run dev' command complies vite and it will track and update frontend modifications without reload.

How to run and watch local server at the same time?

I've been having some issues setting up my local server. I can get it to run with php artisan serve, but I can't add npm run watch at the same time.
I've done npm install and updated my node too. It says to run php artisan serve first and then to run npm run watch, but once I've done the artisan serve, it doesn't let me type in anything else.
If I run npm run watch before php artisan serve, it opens up the wrong port (3000 instead of 8000), too.
Can someone please let me know what is going on? Have you encountered this before? Nothing I could find on here matched my problem, but in case I missed it, please let me know. And if you need any further information, as in logs, etc.
Open a new terminal tab and run npm run watch on that one. If you are using default Windows cmd take a loot at cmder or the new Windows Terminal.

'Could not find binary sh' when running `yarn install` after gitlab webhook

Some mysterious is happening on my server and I don't know why. I'm trying to run a simple deploy script containing yarn install. The script is triggered by a POST request from a Gitlab CE server. The specs of the server:
Ubuntu 16.04
Nginx (mainline)
Node 6 / Npm 3
PHP 7.1
The webhook is received by a PHP file containing something like this:
exec('cd /var/www/example.com && sh deploy > deploy.log 2>&1 &');
The deploy file contains a few commands like git pull, composer install and yarn install. Everything is working fine, except for Yarn/NPM. It keeps complaining about this:
error /var/www/example.com/node_modules/node-sass: Couldn't find the binary sh
I've searched for hours (maybe days) to find a solution, but no success so far. Hope someone can help me (and someone else too).
error Couldn't find the binary cross-env NODE_ENV=development node_modules/webpa
ck/bin/webpack.js --watch --progress --hide-modules --config=node_modules/larave
l-mix/setup/webpack.config.js

How to run only one webpack process in Laravel Application?

is there any utility to pass through npm run dev variable that may compile only one process
for example
npm run dev --sass or npm run dev --js --styles --scripts
thank you in advance
No, there is no such function available by default. The only thing (that might help you) you can do is running npm run watch, which only compiles changed files again.

Recommend way to Artisan on Docker

I am yet to find an elegant and efficient way to run Laravel Artisan commands in my Docker based local dev environment.
Could anybody suggest the recommended or "proper" way to do things like migrations?
Or, has anybody found a neat way of doing this? Ideally with examples or suggestions.
Things that I've considered:
A new container (sharing the same volume and db link) with ssh, just for running commands (seems nasty).
Hacks in supervisor that could then end up running on live (not ideal).
Editing db configs, or trying to hack in a "host" environment, so that at least things like migrate can be run from the host.
Creating web front ends to run things (really nasty).
Trying to build a "signal" for it things.
I'm still getting my head around Docker and it's new-container-for-everything approach.
I suppose I want to balance cool-dev-ops stuff with why-do-I-need-another-fake-server-just-get-it-working-already.
I'd love to commit to it for my dev workflow, but it seems to become awkward to use under certain circumstances, like this one...
Any suggestions and ideas are welcome. Thanks all.
Docker 1.3 bring new command exec
So now you can "enter" running container like
docker exec -it my-container-name /bin/bash
After that you can run any command you want
php artisan --version
The best practice regarding Docker is to run each process inside it's own container. Therefore, the ideal way to run artisan commands is to have an image for creating containers specifically for this purpose.
I've created an image which can be pulled from the Docker Hub dylanlindgren/docker-laravel-artisan and it works really well. It's on GitHub as well if you want to take a look at the Dockerfile behind it.
I've also just written a blog post describing the way that all these seperate containers fit together.
There are a couple of possibilities...
Mounting a host directory in your container as the folder in which your Laravel app lives. That way you can just run php artisan migrate or composer update from the host. You might have problems with deployment, though, since you would have to replicate that part of your environment on the server.
adding an SSH server to your container (which is not recommended; here's a good discussion of that).
build and use nsenter, a tool for "entering" a running container and getting shell access. Note, I haven't used it, I just found it a while ago via a reference in the link above.
If you're primarily interested in deployment and you're doing it via a dockerfile, then the answer would be to add composer install and php artisan migrate to your dockerfile so they run when the container is built.
I'm interested in hearing more answers to this. It's something that I'm just getting into as well and would like to learn more about.
I use SSH and run migrations from a terminal inside the container.
I personally like Phusion's approach of using Docker as a 'lightweight virtual machine'. So I used their baseimage-docker which I've extended to create my own Docker image for Laravel applications.
I'm aware Phusion's image can be contentious in the Docker community, and that SSH is frowned upon by some who advocate Docker containers as microservices. But I'm happy with Phusion's approach until there are more established tools and practices for the multi-container approach.
I'm in the process of figuring out creating Docker images for Laravel projects, this is what I have so far.
FROM base_image_with_LAMP_stack_and_dependencies
WORKDIR /var/www/html/app
COPY composer.json composer.json
RUN composer install --no-scripts --no-dev --no-autoloader
COPY . .
RUN echo 'chown -R www-data:www-data /var/www/ \
&& composer dump-autoload \
&& cp .env.example .env \
&& php artisan key:generate \
&& php artisan migrate \
&& apachectl -D FOREGROUND' >> /root/container_init.sh && \
chmod 755 /root/container_init.sh
EXPOSE 80
CMD /root/container_init.sh
This way, there is no dependency on database during build time, and the migration process can run every time a new container is started.

Categories