I'm trying to use browsersync with Laravel. I followed this tutorial from laracasts but my browsersync isn't syncing.
Here's my gulpfile:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.sass('app.scss');
mix.browserSync();
});
My app is homestead.app. So, after starting gulp watch, I go to homestead.app:3000 and see my app without BrowserSync.
I go to homestead.app:3001 and I can access BrowserSync dashboard, which shows this:
Local
http://localhost:3000
External
http://10.0.2.15:3000
Proxying:
http://homestead.app
Current Connections
Connected browsers will be listed here.
Local and external links not responding.
No matter what I did, I couldn't see any connection in Current Connections tab.
What I tried:
tried running gulp watch from my local environment instead of homestead.
This time both Local and external links were pointing to my app, but no syncing.
I'm using windows 8.1
Any help would be appreciated.
Well, after trying to achieve the desired result for couple of hours I decided to go with plain old gulp, rather than Laravel Elixir.
I removed the node_modules folder, cleaned up the default package.json and gulpfile.js files and customized them, then ran clean npm install.
After that, i used gulp watch on my local machine. Also, i went with LiveReload instead of BrowserSync.
Related
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.
I'm developing project using vuejs and Laravel. everything worked fine on my laptop and when I upload code to server (Digital Ocean) at that first time.
Otherwise, when I update some Vue component in resources/components folder and upload it to server again. It's seem component is not update on the server when I refresh the browser.
my code in \ webpack.mix.js is
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
if (mix.inProduction()) {
mix.version();
}
and I try to run npm run dev or npm run prod on the server after I push the nw code on it as well. It doesn't work.
I also try to clear browser cache and reload url again, it doesn't work also.
Please give me an advice how should I do.
Regards.
Well its not a good idea to upload a laravel/vuejs project at shared hosting. Although doing such process can save your life.
Run php artisan serve view:clear
Do changes at your local file and then npm run watch.
after uploading all the changes to server, always replace public/css/app.css & public/js/app.js files.
I am developing a Laravel-Vue app using Laravel/Homestead. The Vue code is compiled using laravel-mix, all using fresh installs (it's a new project).
I would like to be able to test my Vue components 'outside' of the Laravel project. So I figured I just
1) Add a script in package.json like this
"devser": "cross-env NODE_ENV=development webpack-dev-server",
2) Add an entry point main.js file in which I can run my components isolated
import Vue from 'vue'
import Example from './components/Example.vue'
new Vue({
el: '#app',
render: h => h(Example)
})
3) add a webpack.config.js file to configure webpack for this isolated app. I just took it from the vuejs template: webpack-simple and changed the entry point path.
So far, running the devser script does compile the code without errors, and apparently, the code is served at (webpack output)
Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html
However, opening localhost:8080 gives an error: This site can't be reached, localhost refuses to connect. So I have been searching for a while and found things about devserver proxy's and stuff like that but I don't understand what I would need to add to my webpack.config.js.
Maybe good to note: I am not interested here in calling the Laravel backend from these Vue components, it is just for testing the components in an isolated way. My next step was to add Vue-storybook to the party to do this.
To summarize, I am looking for one codebase (Laravel + Vue on Homestead) where I can separately test the components. Any help would be appreciated.
EDIT: If I am not logged in to the vagrant machine, I can navigate to the project folder and run
npm run devser
which serves the project at localhost:8080 and this URL does work. So I have a workaround for now.
It sounds like you are running webpack-dev-server inside your Homestead box. If so, you need to forward port 8080 from your host to the Vagrant box:
https://laravel.com/docs/8.x/homestead#forwarding-additional-ports
Add this to your Homestead.yaml:
ports:
- send: 8080
to: 8080
Then, run vagrant reload --provision to apply the changes.
Now you should be able to view http://localhost:8080/
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
I followed the docs in the official website. The problem is I use webpack as my bundler instead of brunch. The deployment is successful. I can even access the api routes. My only problem is the assets (js,css) in the homepage is not found. Locally, I can access the home page successfully when I run mix phoenix.server.
I tried peeking at the priv/static folder in heroku (using heroku run bash) where the files are moved after being compiled and saw the asset files there. Did I miss anything? or a configuration that I should put?
Here is the remote deploy output
http://pastebin.com/1mL1YWTS
Here is my custom compile file (to override phoenix-static buldpack)
http://pastebin.com/BGHf9xBK
Here is my webpack.config.js
http://pastebin.com/Xv2E1yCE
I have used webpack with the following compile:
./node_modules/.bin/webpack -p
mix phoenix.digest
You need to call mix phoenix.digest to generate a manifest that can be used in the static path helpers. http://hexdocs.pm/phoenix/Mix.Tasks.Phoenix.Digest.html#run/1