403 Access to localhost was denied, gulp-connect-php, browsersync - php

Receiving a 403 Error using gulp-php-connect with browser-sync. Identical configuration to another computer which does not produce the error.
Gulp CLI v2.3.0
Gulp Local v3.9.1
Node v10.16.3
Have attempted to change ports. Receiving error on localhost:2000 as well as proxy. Any point in the right direction would be much appreciated.
my gulpfile:
// Gulp 3.8 code... differs in 4.0
var gulp = require('gulp'),
sass = require('gulp-sass'),
php = require('gulp-connect-php'),
minifyCss = require('gulp-minify-css'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
rename = require("gulp-rename"),
php2html = require('gulp-php2html'),
gutil = require('gulp-util'),
browserSync = require('browser-sync').create();
gulp.task('php', [], function() {
php.server({
base: 'build',
port: 7000,
router: "router.php",
keepalive: false
});
});
gulp.task('browser-sync',['php'], function() {
browserSync.init({
proxy: '127.0.0.1:7000',
port: 2000,
open: true,
notify: false
},function(){
});
});
gulp.task('dist', [], function() {
gulp.src('build/marketing/assets/c/**/*.css')
.pipe(minifyCss())
.pipe(gulp.dest('public/marketing/assets/c'));
gulp.src('build/marketing/assets/j/**/*.js')
.pipe(uglify())
.pipe(concat('main.js'))
.pipe(gulp.dest('public/marketing/assets/j'));
gulp.src('build/i/**/*.js')
.pipe(gulp.dest('public/marketing/assets/i'));
gulp.src('build/**/*.php')
.pipe(gulp.dest('public/'));
});
gulp.task('styles', [], function() {
gulp.src('build/sass/**/*.scss')
.pipe(sass({
errLogToConsole: true
}))
.pipe(gulp.dest('build/marketing/assets/c'));
});
gulp.task('min', [], function() {
gulp.src('build/marketing/assets/c/main.css')
.pipe(minifyCss())
.pipe(rename('main-220331.min.css'))
.pipe(gulp.dest('build/marketing/assets/c'));
});
gulp.task('uglify', [], function() {
gulp.src('build/marketing/assets/j/**/*.js')
.pipe(uglify().on('error', gutil.log))
.pipe(concat('main.js'))
.pipe(gulp.dest('build/marketing/assets/j/min'));
});
gulp.task('reloadsync', [], function() {
browserSync.reload();
});
gulp.task('default', ['browser-sync'], function () {
gulp.watch('build/sass/**/*.scss',['styles']);
gulp.watch('build/marketing/assets/c/main.css',['min']);
gulp.watch(['build/**/*.php', 'build/marketing/assets/c/**/*.css'], ['reloadsync']);
});

Related

How to get Browser-Sync to serve PHP-Files in Gulp 4

I am working on a gulpfile which already works fine when its processing html/scss/js. Now I want to have my site on PHP-basis and need Browser-Sync to serve my PHP instead of showing "Cannot GET /" in the browser. I know that implies some path issue as it all works, when there is an index.html instead of an index.php in the build folder.
const {src,dest,series,parallel,watch} = require('gulp');
const del = require('del');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const origin = './src/';
const destination = './build/';
sass.compiler = require('node-sass');
async function clean(cb) {
await del(destination);
cb();
}
function html(cb) {
src(origin + '*.html').pipe(dest(destination));
cb();
}
function php(cb) {
src(origin + '*.php').pipe(dest(destination));
cb();
}
function css(cb) {
src(origin + 'css/*.scss')
.pipe(sourcemaps.init())
.pipe(
sass({
sourcemap: true,
outputStyle: 'compressed'
})
)
.pipe(dest(destination + 'css'));
cb();
}
function js(cb) {
src(
origin + 'js/lib/jquery.min.js'
).pipe(dest(destination + 'js/lib'));
src(
origin + 'js/*.js',
).pipe(dest(destination + 'js'));
cb();
}
function watcher(cb) {
watch(origin + '**/*.html').on('change',series(html,browserSync.reload));
watch(origin + '**/*.php').on('change',series(php,browserSync.reload));
watch(origin + '**/*.scss').on('change',series(css,browserSync.reload));
watch(origin + '**/*.js').on('change',series(js,browserSync.reload));
cb();
}
function server(cb) {
browserSync.init({
notify: false,
//open: false,
server: {
baseDir: destination
}
})
cb();
}
exports.default = series(clean, parallel(html,php,css,js), server, watcher);
I looked at some solutions which almost all are based on Gulp 3 + gulp-connect-php which seems not to be amongst the Gulp-Plugins anymore. Am I missing that Gulp4 + Node can handle that PHP out of the box? And if yes how?
This is the closest I think I (as a nube) came to a solution: (These are only the changes/additions to the script above)
const phpConnect = require('gulp-connect-php');
function php(cb) {
src(origin + '*.php').pipe(dest(destination));
cb();
}
function watcher(cb) {
watch(origin + '**/*.html').on('change',series(html,browserSync.reload));
watch(origin + '**/*.php').on('change',series(php,browserSync.reload));
watch(origin + '**/*.scss').on('change',series(css,browserSync.reload));
watch(origin + '**/*.js').on('change',series(js,browserSync.reload));
cb();
}
function connectsync(cb) {
phpConnect.server({
port: 8000,
keepalive: true,
base: destination
},
function() {
browsersync({
proxy: '127.0.0.1:8000'
});
});
cb();
}
function server(cb) {
browserSync.init({
notify: false,
open: true,
server: {
baseDir: destination
}
})
cb();
}
exports.default = series(clean, parallel(html,php,css,js), connectsync, server, watcher);
but this seems to get stuck at the browsersync function which - I totally agree - is undefined.
Any help is appreciated very much !!!
After looking into the details of gulp-connect-php it turned out it supports only PHP 5.4 anyway so its not an option. Instead I utilized my XAMPP (while locally installed PHP + Apache might have been a liitle more elegant) and setup browser-sync to proxy to it:
function sync(cb) {
browserSync.init({
proxy: 'http://localhost/malte-podolski.de/build',
port: 3000,
})
cb();
}

How to use browser sync external url with PHP in android?

I've tried to open my joomla site in the Android browser with browserSync external URL.
I use wamp to run the server on pc.Is there a way to set up PHP and a web server on an Android device ?
How can I run joomla or php site on my Android device with browserSync ?
Terminal
external url in browser
my gulpfile.js:
var gulp = require('gulp'),
watch = require('gulp-watch'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
cssVars = require('postcss-advanced-variables'),
cssImport = require('postcss-import'),
nested = require('postcss-nested'),
browserSync = require('browser-sync').create();
gulp.task('styles', function() {
var processors = [
cssImport,
cssVars,
nested,
autoprefixer({
browsers: ['last 2 versions']
})
];
return gulp.src('./assets/styles/styles.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./temp/styles'));
});
gulp.task('watch', function() {
browserSync.init({
proxy: "localhost/j2shop",
port: 8080,
notify: false,
watchTask: true,
debugInfo: true,
logConnections: true
});
watch('./assets/includes/**/*.php', function() {
browserSync.reload();
});
watch('./assets/styles/**/*.css', function() {
gulp.start('cssInject');
});
});
gulp.task('cssInject', ['styles'], function() {
return gulp.src('./temp/styles/styles.css')
.pipe(browserSync.stream());
});
Just run gulp. That will start Browsersync running and it will report to you in Terminal what the external url to enter on your device is. It will be something like http://10.0.1.12:3000. Just enter that on your Android and you will see your site.

Setting up Yeoman Webapp with PHP

Trying to set up yo webapp to use a PHP server instead of HTML.
I tried following this answer by example with no success.
Gulp-webapp running BrowserSync and PHP
I added gulp-connect-php to my project.
// Towards the top of my gulpfile, added:
const connect = require('gulp-connect-php');
// Added the following task below:
gulp.task('php-serve', ['styles', 'fonts'], function () {
connect.server({
port: 9001,
base: 'app',
open: false
});
var proxy = httpProxy.createProxyServer({});
browserSync({
notify: 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();
}
}
}
});
// watch for changes
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']);
});
Ran gulp php-serve
PHP 5.5.36 Development Server started [etc…]
Listening on http://127.0.0.1:9001
However, not without error:
ReferenceError: httpProxy is not defined
How can this be resolved? I wouldn't even mind using MAMP which I already have running on port 8888
It seems I missed a vital part of installing http-proxy, which I thought I had installed before.
Here's an idiot guide of getting PHP to work with the most popular yeoman generator, generator webapp, with big thanks to TobyG
Install http-proxy
npm install http-proxy --save
Install gulp-connect-php
npm install --save-dev gulp-connect-php
Add these two functions to the top of gulpfile.js
const connect = require('gulp-connect-php');
const httpProxy = require('http-proxy');
Add this additional task to gulpfile.js
gulp.task('php-serve', ['styles', 'fonts'], function () {
connect.server({
port: 9001,
base: 'app',
open: false
});
var proxy = httpProxy.createProxyServer({});
browserSync({
notify: 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();
}
}
}
});
// watch for changes
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']);
});

Changing node.js server to Apache server

I was working with react-webpackage and running the project into node.js
Now due to demand , i have to add some php files in the project but i don't know how to add php file in my project and now transfer my project from node.js to Xampp and run my project with xampp... can you please guide me with that.
I am using this webpack "https://github.com/srn/react-webpack-boilerplate".
And my webpack index.js file looks like this.
'use strict';
var fs = require('fs');
var path = require('path');
var express = require('express');
var app = express();
var compress = require('compression');
var layouts = require('express-ejs-layouts');
app.set('layout');
app.set('view engine', 'ejs');
app.set('view options', {layout: 'layout'});
app.set('views', path.join(process.cwd(), '/server/views'));
app.use(compress());
app.use(layouts);
app.use('/client', express.static(path.join(process.cwd(), '/client')));
app.disable('x-powered-by');
var env = {
production: process.env.NODE_ENV === 'production'
};
if (env.production) {
Object.assign(env, {
assets: JSON.parse(fs.readFileSync(path.join(process.cwd(), 'assets.json')))
});
}
app.get('/*', function(req, res) {
res.render('layout', {
env: env
});
});
var port = Number(process.env.PORT || 3001);
app.listen(port, function () {
console.log('server running at localhost:3001, go refresh and see magic');
});
if (env.production === false) {
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var webpackDevConfig = require('./webpack.config.development');
new WebpackDevServer(webpack(webpackDevConfig), {
publicPath: '/client/',
contentBase: './client/',
inline: true,
hot: true,
stats: false,
historyApiFallback: true,
headers: {
'Access-Control-Allow-Origin': 'http://localhost:3001',
'Access-Control-Allow-Headers': 'X-Requested-With'
}
}).listen(3000, 'localhost', function (err) {
if (err) {
console.log(err);
}
console.log('webpack dev server listening on localhost:3000');
});
}
basically i want to declare some variables in php and fetch them to javascript.so just want to add one file in webpack(file named as index.php) and then all my project work normally
Thanks.
You can't run express on the same port of xampp, you have to use different ports (or different servers) to serve the php file.

Browser Sync - PHP and htaccess?

I'm currently using the Yeoman Generator Gulp-Webapp, which I modified slightly to make it work with PHP. I simply added gulp-connect-php & http-proxy then edited the gulpfile.babel.js browserSync task by adding the following code. Now I would need to find a way to make it work with htaccess. Any idea how this could be done?
gulp.task('serve-php', ['styles', 'fonts'], () => {
phpConnect.server({
port: 9001,
base: 'app',
open: false
});
const proxy = httpProxy.createProxyServer({});
browserSync({
notify: false,
open: true,
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']);
});
I was able to make it work with PHP and htaccess!
Instead of using gulp-connect-php to create the vhost, I used XAMPP. I then target the proxy to the XAMPP vhost. Here's how I did it:
gulp.task('serve-php', ['styles', 'fonts'], () => {
const proxy = httpProxy.createProxyServer({});
browserSync({
notify: false,
open: true,
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://xamppvhost.dev' });
}
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']);
});
I removed phpConnect.server() and changed the proxy.web() to target my XAMPP vhost.
Now everything's working!!
Perhaps this can still be usefull for those bumping into this.
If you're developing on Mac, you can use MAMP and gulp-mamp, by far the easiest way to get things working - PHP, htaccess and MySQL if need be.
https://www.npmjs.com/package/gulp-mamp
After installing, you can get things to work with just this code in your gulpfile:
var mamp = require('gulp-mamp');
gulp.task('mamp-start', function(cb){
mamp(options, 'start', cb);
});
And then adding the task to the default task, or via command gulp mamp-start.
Mamp + Browser sync
is also very easy, just copy the code from this gulpfile:
https://github.com/sdotson/gulp-mamp-browsersync/blob/master/gulpfile.js

Categories