Changes in the vue file not applying in the browser - laravel

I am working in project having technology(laravel + vuejs).In that there is a form created in vue file and i want to add a text in the vue file.So as i have seen that "when any changes is done in vue file then need to rebuild the application".And i see that there are commands for rebuild the application is npm run dev , npm run prod , npm run watch and npm run watch-poll. I have tried all this commands after saving the file through FTP but sometimes the changes is applied (Note : Not immediately but after some duration) and sometimes no changes apply in the browser.When i tried the above command by executing it then there is no such error occurs and the rebuild is done successfully.So what will be the issue can you please suggest something that i need to configure?
Below is the code of package.json,webpack.mix.js file and after that i have attached image of putty in which application rebuild is done.
Thanks in advance!

I think you are not understanding what npm run dev/prod/watch do. If you alter the .vue file in your resources folder, then have npm rebuild your assets, then ftp the vue file to your server, nothing should happen.
Depending on how you have your laravel mix file set-up, the file you need to ftp to the server is likely public/js/app.js.
You should really consider getting your local environment setup for development, there is nothing I can image worse than viewing your changes by ftp-ing files to a server.

Related

Vite - how to change code in node_modules folder to debug/find errors

Coming from Webpack I was able to change code in the node_modules folder in order to add a console.log statement or something like this to find errors.
Sometimes I use external libraries incorrectly and it's easier to be able to alter lines/files in the node_modules folder to find out what my mistakes are.
With Vite, this is not possible. I can change whatever I want in the node_modules folder by my browser still uses the original libraries code.
Is there a way that allows me to change files so Vite will recognize the changes and use my new files?
Note: it's not about pull requests or permanent changes, it's only about an console.log(typeof X) and stuff like that for a single use.
Bascially the same question as this one Changing code in node_modules does not work in hot reload regardless of the bundler
Restart Vite dev server with the --force flag to re-bundle the deps. This has the same effect as manually deleting the node_modules/.vite directory.
See File System Cache in Dependency Pre-Bundling for more information.
Dep Pre-Bundling
According to archive.org:vitejs.dev/guide/dep-pre-bundling.html it's not called "caching" but rather "dep pre-bundling" - y'know, because we wouldn't want the average Joe's search terms to work now would we? 😉
Delete Vite Cache
rm -rf ./node_modules/.vite
Reload Dev without Vite Cache
rm -rf node_modules/.vite; npm run dev
Monkey Patch Away
I was pulling my hair out trying to debug a dependency that needed a PR and doing dumb stuff like republishing vite-shim-foobar because I couldn't find the cache, but... I found it. So now I can monkey patch to debug things too!

Laravel + vite, Laravel not reading HMR files unless run build

I am having issues with a fresh installation using docker + laravel + vite.
I can currently load the blade template successfully, however, when I load my file in resources/js/app.js, it is failing as it cannot find the file.
In my blade template, I use #vite('resources/js/app.js') to load this file.
If I run npm run build it loads the file successfully, but if I am working with them by using the HRM npm run dev, laravel cannot find this file.
How can I resolve this? Should I move to mix for this?
Vite port was not exposed in my dockerfile. Now it works perfectly :D

500 issue with Laravel

I have seen this answer in many posts but they have not helped me at all. I followed the regular steps to create the laravel project like this:
I cloned from my repository.
I ran composer update.
I added 777 permissions to storage and bootstrap folders.
I have a .env file.
I verfied the .htacces and it's ok.
It is working in locahost, but when I try to replicate it in Hostinger it does not work, it displays the 500 server error. So I wonder what is the problem?
I checked the logs by the way and they were empty. I put the laravel project debugger to true too.
the website url is xellin.com
The debug:
The logs folder:
Thanks.
I think this is a good opportunity to point out how PHP / Laravel / Underlying Server interacts one to each other.
First:
The HTTP server inspects Document Root and .htaccess to get instructions.
If the file is .php (like Laravel), then it CALLS to the php handler.
The php handler could be a FPM version or a Fast CGI version.
-> If an error ocurrs parsing the .htaccess or with the initial interaction between Http Server and PHP... Laravel never runs for real. All ends in a PHP error log
To find out what's wrong, you need to inspect what PHP / Http Server said about the error in their respective logs.
In short words: at this point is not a Laravel error, but a server/php one.
Second:
If Apache/PHP runs well, then PHP executes the Laravel Applicacion Lifecycle... if Laravel encounters a problem, then you will see the usual output error of Laravel Error Handler.
I think this is a must to know to work with web apps in general, because many times developers miss to catch if the problem was with Laravel, or with PHP / Server itself.
As a side note, that's why it is important to know how to choose propper hosting service for Laravel.
Thanks for reading.
You can try to clear cache
Like as
php artisan optimize
Or
You can manually delete cache files which is located in bootstrap folder and inside bootstrap folder you can see cache folder inside cache folder delete all files except git ignore file your issue fix
If you show again this error on live serve then tou can update your composer and then run
php artisan optimize
at first, if you give any of your folders 777 permissions, you are allowing ANYONE to read, write and execute any file in that directory.... what this means is you have given ANYONE (any hacker or malicious person in the entire world) permission to upload ANY file, virus or any other file, and THEN execute that file...so please be careful because IF YOU ARE SETTING YOUR FOLDER PERMISSIONS TO 777 YOU HAVE OPENED YOUR SERVER TO ANYONE THAT CAN FIND THAT DIRECTORY. please read the full explanation from here
the second here is the detailed steps I used to deploy my projects to the server:
run npm run production then update your github repo.
clone the project from GITHUB to server - clone to an outside folder (not public_html folder)
run cd <cloned folder name>
run composer install
run npm install
copy and configure .env file to cloned folder( be sure name is .env not env).
copy all content of cloned_project_folder_name/public to public_html folder
in index.php inside public_html folder edit as below
$app = require_once __DIR__.'/../cloned_project_folder_name/bootstrap/app.php';
require __DIR__.'/../cloned_project_folder_name/vendor/autoload.php';
set your .htaccess properly.
change permission to 755 to index.php and all file in public_html folder
run composer install --optimize-autoloader --no-dev
run php artisan config:cache
run php artisan route:cache
I think I state it all, hope that will help

How to host a simple index.html with some javascript and css on Heroku?

I'm trying to deploy an application through Heroku which is just an index.html page with some javascript and css.
I've connected my Github repository to it as a deployment method, but it never seems to work.
Every time I type "heroku logs", it spits back out:
"npm ERR! missing script: start" first.
From what I've searched, it tells me that I need to add "start": "somefile.js" as a starting point in package.json, but this is a very simple index.html page with javascript invoked from whenever a couple buttons are pressed.
How am I meant to get past this?
Heroku isn't really built for hosting static websites that have no dynamic server backend. If you want to do that, you should look into using a proper static file host like Amazon S3, Netlify, etc.
However -- if you DO want to do this on Heroku, you can do so by creating a really simple application (here's an article which shows you how to do it using Ruby): https://devcenter.heroku.com/articles/static-sites-ruby
Agree with #rdegges, you need some sort of http server. A basic node http server is pretty trivial to implement as well.
A full tutorial is available, but the keys steps are:
Make sure you have [node, npm, heroku CLI] installed.
In the root of your project directory, run npm init - (this will create a package.json in your root project directory)
Run npm install --save express - (this will add express as a dependency to the package.json file)
Create a file named Procfile in the root directory.
(contents: web: npm app.js)
Create a file named app.js in the root directory. (contents below)
Commit your changes, push to Heroku - git push heroku master
That should do it. Make sure all your files are in a directory called public as specified in the app.js file or change that to reflect where they actually are.
app.js:
var express = require('express');
var app = express();
app.use('/', express.static('public'));
app.listen(process.env.PORT || 8080);
Full Tutorial: https://devcenter.heroku.com/articles/getting-started-with-nodejs#introduction

How to deploy a Laravel 5 using composer and FTP

I built a project using Laravel 5 on my dev machine and now I'd like to deploy it.
One solution that came to my mind is to upload everything using FTP but I guess there is a better way.
I uploaded the composer.json but I receive tons of errors.
I have ssh/root access but using GIT is not an option.
Make sure you can use composer binary on your server and you are set
upload every file except vendor folder (you may use some FTPS manager that reads git-ignore file and does not upload ignored files)
set permissions to ./storage folder (browse thru this severfault thread)
make sure your web server root is ./public
create env file (that is not going to be changed ever, until you want) and do not overwrite it with "local" env file.
$ composer install (installs everything from composer.lock)
$ composer update (updates from repositories again, do test on local before updating on production)

Resources