I'm currently using Laravel Elixir and I have a problem with BrowserSync. When I changed the proxy into my domain, it still kept using http://homestead.app no matter what. Here is my code:
elixir(mix => {
mix
.sass('resources/sass/*.*', 'public/css/style.css' )
.scripts('resources/js/*.*', 'public/js/main.js')
.browserSync([
'public/css/**/*'
], {
proxy: 'dev.mydomain.com'
});
});
And here is the result in the terminal
[16:57:38] Finished 'default' after 95 ms
[16:57:38] Finished 'watch' after 1.38 s
[BS] Proxying: http://homestead.app
[BS] Access URLs:
-------------------------------------
Local: http://localhost:3000
External: http://192.168.56.1:3000
-------------------------------------
UI: http://localhost:3001
UI External: http://192.168.56.1:3001
-------------------------------------
[BS] Watching files...
As you can see, it's still proxying at homestead.app
Any idea how to fix this issue?
Try changing it to:
browserSync({
proxy: 'dev.mydomain.com',
files: [
'public/css/**/*'
],
});
Related
I'm trying to build an app using Laravel 9 and ReactJS with vite js. I tried following command to build.
npm run dev
But I'm getting following errors,
GET http://[::1]:5173/resources/css/app.css net::ERR_CONNECTION_REFUSED
GET http://[::1]:5173/#vite/client net::ERR_CONNECTION_REFUSED
GET http://[::1]:5173/resources/js/app.jsx net::ERR_CONNECTION_REFUSED
GET http://[::1]:5173/#react-refresh net::ERR_CONNECTION_REFUSED
If you entered npm run build on production, your .env file looks good and you still have such errors as the author just delete hot file in public directory
This means that your assets are not built yet, use npm run build.
In my case the issue was that the port 5173 was already in use.
I've just freed it - and everything worked again. Hope that helps.
Its Work for me
1-First Run npm run dev in Terminal
2-Then Run npm run build
I think I may have found a solution with the build option called Rollup.
When building in production, rollup will remove unused code. In this process it will bundle the required assets and reference them in accordance to the URL that you would be using at that current moment.
To fixed it, you could try this:
export default defineConfig({
build: {
rollupOptions: {}
}
})
I was helped by a similar issue posted on Github so maybe you could use that as a point of reference.
Here is the Discussion
build assets before uploading your project in live server or cpanel
you can use this code - npm run build
you can see some change in your project folder after build assets file.
assets file will come to this folder - public->build
add host in your vite.config.js, so it will force it to IPv4
export default defineConfig({
server: {
host: '127.0.0.1', // Add this to force IPv4 only
},
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
});
Local is working fine for me, try adding this to vite.config.js file:
server: { cors: false },
or (try adding and mixing all values)
server: { https: false, cors: false, hmr: false, port: 8000 },
I am trying to deploy my Laravel 7.29.3 app to Google App Engine Standard environment. I have followed the guided located here https://cloud.google.com/community/tutorials/run-laravel-on-appengine-standard. However, I get a View[Welcome] not found error when I view my deployment. My app.yaml file looks like below:
runtime: php72
env_variables:
## Put production environment variables here.
APP_KEY: YOUR_APP_KEY
APP_STORAGE: /tmp
VIEW_COMPILED_PATH: /tmp
SESSION_DRIVER: cookie
Its a very simple yaml file as I am only using the welcome view and a route to a contact page. Please note that I am not using any database in this version. Please see my routing below:
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::post('contact', 'ContactFormController#ContactForm');
I also reviewed this question here: View [welcome] not found but I am still getting the same error. From my understanding of #sllopis comment, I need to put my welcome.blade.php file in a layouts folder. I have done that, and still get the same error. Any assistance would be appreciated.
Thanks
I have found the solution. First you can add handlers to your app.yaml file. It should look like below:
runtime: php72
handlers:
- url: /(.*\.(gif|png|jpg|css|js))$
static_files: public/\1
upload: public/.*\.(gif|png|jpg|css|js)$
- url: /.*
secure: always
redirect_http_response_code: 301
script: auto
env_variables:
## Put production environment variables here.
APP_KEY: YOUR_APP_KEY
APP_STORAGE: /tmp
VIEW_COMPILED_PATH: /tmp
SESSION_DRIVER: cookie
Source: https://stackoverflow.com/a/57822141/2251229
Then you can update your config/filesystems.php file. You can add a new file system as per the sample provided below.
'gcs' => [
'driver' => 'gcs',
'project_id' => env('GOOGLE_CLOUD_PROJECT_ID', 'your-project-id'),
'key_file' => env('GOOGLE_CLOUD_KEY_FILE', null), // optional: /path/to/service-account.json
'bucket' => env('GOOGLE_CLOUD_STORAGE_BUCKET', 'your-bucket'),
'path_prefix' => env('GOOGLE_CLOUD_STORAGE_PATH_PREFIX', null), // optional: /default/path/to/apply/in/bucket
'storage_api_uri' => env('GOOGLE_CLOUD_STORAGE_API_URI', null), // see: Public URLs below
'visibility' => 'public', // optional: public|private
],
And then update your default file system like so:
'default' => env('FILESYSTEM_DRIVER', 'gcs'),
Install the Laravel Google Cloud Storage package using the below command:
composer require superbalist/laravel-google-cloud-storage
Source: https://stackoverflow.com/a/57177913/2251229
From here you can do your gcloud app deploy, and gcloud app browse. If you get further errors, do php artisan config:clear. This should clear any cached configurations.
After watching the newest episode on Laracasts (https://laracasts.com/series/painless-builds-with-laravel-elixir/episodes/13) I decided to try out BrowserSync for Laravel Elixir.
To begin with I did the usual things for setting up a laravel project:
laravel new test
cd test
npm install
Then I tried to visit the BrowserSync UI at localhost:3001 but when I went to localhost:3000 where the actual site should be it just kept on loading and never showed the site itself.
gulp watch output:
[16:49:11] Using gulpfile ~/Sites/test/gulpfile.js
[16:49:11] Starting 'watch'...
[16:49:11] Finished 'watch' after 14 ms
[BS] Proxying: http://homestead.app
[BS] Access URLs:
----------------------------
Local: http://localhost:3000
----------------------------
UI: http://localhost:3001
----------------------------
[BS] Watching files...
gulpfile.js:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.browserSync({ online: false });
});
Really great screen.
So i had same problem, i just run my server because in defaut setting elixir set proxy with "http://homestead.app"
So you can lunch your homestead with configuration,
or just run php artisan with this configuration in your gulpfile
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.browserSync({
online: false,
proxy : 'localhost:8000'
});
});
I'm trying to use Elixir BrowserSync, one of the newest features of Laravel.
I added it to the gulp file
elixir(function(mix) {
mix.sass('app.scss')
.browserSync();
});
when I run "gulp watch" it output this message
[20:49:20] Using gulpfile ~/Desktop/laravel/gulpfile.js
[20:49:20] Starting 'watch'...
[20:49:20] Finished 'watch' after 11 ms
[BS] Proxying: http://homestead.app
[BS] Access URLs:
----------------------------------
Local: http://localhost:3000
External: http://10.9.0.48:3000
Automatically a browser is launched with the url http://localhost:3000 but nothing loads.
I think the problem is related to this line:
[BS] Proxying: http://homestead.app
You can if you use BrowserSyncs server.
mix.browserSync({
proxy: false,
server: {
baseDir: './'
}
});
Are you running multiple homestead sites? It looks like it defaults to proxying through homestead.app if you do not include a proxy setting. If you don't host your local on homestead.app it won't find it.
Try
.browserSync({ proxy: 'domain.app' });
Where domain.app is what you are serving the site with.
The direct answer to your question - it is not possible to not proxy the .browserSync. Long side-answer - you can still use elixir's implementation of browserSync in gulp, but you must have a separate PHP server to interpret the files.
Edit: I saw a way to not proxy by providing the script in the pages manually (by not giving any arguments in the .browserSync() call, but don't remember where and how to do it exactly.
The reason is that browserSync requests all the data from the server for you, injects a little javascript listener and displays everything else:
<script type='text/javascript' id="__bs_script__">//<![CDATA[document.write("<script async src='/browser-sync/browser-sync-client.2.9.11.js'><\/script>".replace("HOST", location.hostname));//]]></script>
One way is to php artisan serve --host=0.0.0.0 in a separate terminal to start up the server and then use the .browserSync({proxy: 'localhost:8000'}). It all works - the BrowserSync UI and all the calls to refresh the pages.
Note: I could not connect to artisan serve without the --host=0.0.0.0.
For those wanting an all automated solution via gulp, here it is:
Use the gulp packages gulp-connect-php and laravel-elixir-browsersync2. The first starts up the php artisan serve and the other connects it to browserSync.
Install the packages:
npm install laravel-elixir-browsersync2 --save-dev
npm install gulp-connect-php --save-dev
Add the required lines to your gulpfile.js:
Code:
var elixir = require('laravel-elixir'),
gulp = require('gulp');
var connectPHP = require('gulp-connect-php');
var BrowserSync = require('laravel-elixir-browsersync2');
elixir(function(mix) {
mix.sass('app.scss');
});
elixir(function(mix) {
connectPHP.server({
base: './public',
hostname: '0.0.0.0',
port: 8000
});
BrowserSync.init();
mix.BrowserSync(
{
proxy: 'localhost:8000',
logPrefix : "Laravel Eixir BrowserSync",
logConnections : false,
reloadOnRestart : false,
notify : false
});
});
Then - simply gulp.
Disclaimer: This might not work with the gulp watch, but there might be people with the answer to that.
There is also a line PHP server not started. Retrying... before the [Laravel Eixir BrowserSync] Proxying: http://localhost:8000. It belongs to gulp-connect-php when trying to check if the server is running.
I found other solution on laracast for Bloomanity and it works with me like a charm!
$ php artisan serve --host=0
and then in your gulp add:
mix.browserSync({proxy: 'localhost:8000'});
I had to redownload all of my dev tools after upgrading/reset on Windows 10. I can't seem to get my server working with gulp-connect-php, gulp-browser-sync, and http-proxy. The task (below) is actually from this answer: Gulp-webapp running BrowserSync and PHP.
This is on top of a generation of gulp-webapp from Yeoman. The regular "serve" works, but of course doesn't spin up PHP files. I had it working before the upgrade, but now the http-proxy errors out with an ECONNREFUSED when I try to bring up the URL. Note that it doesn't error out until I actually go to the URL, if the task is setup to not open the browser automatically, it won't error until I go to localhost:3000.
Any ideas the cause of this error?
Gulp Task
gulp.task('php-serve', ['styles', 'fonts'], () => {
phpConnect.server({
port: 9001,
base: 'app',
open: false
});
const proxy = httpProxy.createProxyServer({});
browserSync({
notify: false,
open: false,
port: 9000,
server: {
baseDir: ['.tmp', 'app'],
routes: {
'/bower_components': 'bower_components'
},
middleware: function (req, res, next) {
var url = req.url;
if (!url.match(/^\/(styles|fonts|bower_components)\//)) {
proxy.web(req, res, { target: 'http://127.0.0.1:9001' });
}
else {
next();
}
}
}
});
gulp.watch([
'app/*.html',
'app/*.php',
'app/scripts/**/*.js',
'app/images/**/*',
'.tmp/fonts/**/*'
]).on('change', reload);
gulp.watch('app/styles/**/*.scss', ['styles']);
gulp.watch('app/fonts/**/*', ['fonts']);
gulp.watch('bower.json', ['wiredep', 'fonts']);
});
Gulp Run Task with Error
$ gulp php-serve
[07:30:09] Requiring external module babel-core/register
[07:30:11] Using gulpfile ~\...\gulpfile.babel.js
[07:30:11] Starting 'styles'...
[07:30:12] Starting 'fonts'...
[07:30:12] Finished 'styles' after 1.08 s
[07:30:12] Finished 'fonts' after 306 ms
[07:30:12] Starting 'php-serve'...
[07:30:12] Finished 'php-serve' after 183 ms
[BS] Access URLs:
----------------------------------
Local: http://localhost:9000
External: http://x.x.x.x:9000
----------------------------------
UI: http://localhost:3001
UI External: http://x.x.x.x:3001
----------------------------------
[BS] Serving files from: .tmp
[BS] Serving files from: app
C:\...\node_modules\http-proxy\lib\http-proxy\index.js:119
throw err;
^
Error: connect ECONNREFUSED
at exports._errnoException (util.js:746:11)
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1010:19)
I think I know the reason.
Check or you have php installed on your machine and added to your path variables.
open your command line and type:
$ php --version
If it returns:
sh.exe": php: command not found
It means it is not installed or not in the path variable.
You can install php by simply installing WAMP/XAMP or MAMP
https://www.apachefriends.org/index.html
To make sure it is in your path I like to use patheditor
https://patheditor2.codeplex.com/
There go through these simple steps
1) open Path Editor
2) click 'add' in the 'user' section
3) search the folder where php.exe is. (usually something like: C:/xampp/php)
4) click 'ok' and 'ok' again to close path editor
5) reopen your commandline tool and you will see that $ php --version will find the php.exe
Try to run your gulp task again. It should work!
There was a bad install of http-proxy and/or gulp-php-connect. I uninstalled them, cleared npm cache, and did a fresh install. Everything worked fine after that.