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.
Related
I'm developping a PHP website using the Yii2 Framework and I'm trying to implement a socket.io service.
To execute socket.io I use PM2 and my file looks like this :
const { fstat } = require('fs');
var socket = require('socket.io'),
express = require('express'),
https = require('https');
fs = require('fs');
const credentials = {
key: fs.readFileSync('../../../ssl/keys/<path_to_cert_key.key>').toString(),
cert: fs.readFileSync('../../../ssl/certs/<path_to_cert.crt>').toString(),
}
var app = express();
var server = https.createServer(credentials, app);
var io = socket(server, {
cors: {
origin: '<origin_url>',
methods: ['POST', 'GET'],
credentials: true
},
allowEIO3: true,
secure: true
});
io.sockets.on('connection', function(client){
console.log('ok');
client.on('test', function(data){
console.log('test');
console.log(data);
io.sockets.emit('test_r', {message: 'ok'});
});
});
server.listen(30064);
It runs without any error:
pm2 start _socket.js
I can easily access this socket from a view by registering javascript :
var socket = io.connect('<socket_url:port>', {
withCredentials: false,
});
socket.on('test_r', function( data ) {
console.log('it works');
});
It works well if I connect to the socket and emit from a view.
But the thing is that I want to emit an event from a PHP Controller or from a CoreBootstrap Object in a php function like this :
$emitter = new \SocketIO\Emitter( array( 'port' => '30064', 'host' => '127.0.0.1') );
$emitter->broadcast->emit( 'test', ['message' => 'test_message'] );
The module I'm using is ashiina/socket.io-emitter (I also tried a bunch of ohters but they did not work as well).
Nothing happens when I do this. Nothing even happens when I look at the PM2 logs.
Would someone know why the event is not emitted or if there is another way to do it ?
Thanks in advance for your answers.
I am having an issue where browsersync does not find/open my index.php file.
The relevant parts of my gulp file are as follows:
const browserSync = require("browser-sync").create();
const php = require('gulp-connect-php');
// Configure PHP server
gulp.task('php', function(){
php.server({base:'./', port:8010, keepalive:true});
});
// Inject php config into browserSync task
gulp.task('browserSync', function() {
browserSync.init({
proxy:'localhost:8000',
port: 8080,
baseDir: './',
open:true,
notify:false
});
});
// Watch files
function watchFiles() {
gulp.watch("./scss/**/*", css);
gulp.watch(["./js/**/*", "!./js/**/*.min.js"], js);
gulp.watch("./**/*.php", browserSync.reload);
gulp.watch("./**/*.html", browserSync.reload);
}
const watch = gulp.series(build, gulp.parallel(watchFiles, browserSync.reload));
// Export tasks
exports.watch = watch;
My console output when 'Gulp watch' is run looks like this:
The page never opens in the browser.
Any advice as to why it is getting hung up on browser-sync?
Also, browsersync works when run directly in the cmd with:
browser-sync start --proxy "localhost/BtcMiningContracts" --files "*.php, *.html, css/*.css, ./js/**/*"
thanks!
Many hours of searching have resulted in a working answer.
For anyone else experiencing the same issue, the updated code is below:
const browserSync = require("browser-sync");
const php = require('gulp-connect-php');
// Configure PHP server
gulp.task('connect-sync', function() {
php.server({}, function (){
browserSync({
proxy: '127.0.0.1:8000'
});
});
gulp.watch('**/*.php').on('change', function () {
browserSync.reload();
});
});
// Watch files
function watchFiles() {
gulp.watch("./scss/**/*", css);
gulp.watch(["./js/**/*", "!./js/**/*.min.js"], js);
gulp.watch("./**/*.php").on('change', function () {
browserSync.reload()});
}
This works with scss
hope it helps somebody out :)
I am tried to use socket io on the live server and I got this error.
polling-xhr.js:264 GET http://sub.domain.com:3000/socket.io/?EIO=3&transport=polling&t=MFUVMS5 net::ERR_TIMED_OUT
But on my local server, the files worked perfectly. I am working with socket.io and PHP.
Here are my codes:
server.js
var socket = require('./node_modules/socket.io');
var express = require('./node_modules/express');
var app = express();
var server = require('http').createServer(app);
var io = socket.listen(server);
var port = process.env.PORT || 3000;
// server active console view
server.listen(port, function () {
console.log('Server listening at port %d', port);
});
io.on('connection', function (socket) {
// show new added online user
socket.on('now_online', function (data) {
io.sockets.emit('now_online',{
id: data.id,
name: data.name
});
});
});
main.js
var socket = io.connect('http://'+window.location.hostname+':3000');
socket.on('new_online_user', function (data) {
if (login_id != data.online_user) {
$('#contacts-list .contact[data-chat='+data.online_user+']'+' .contact-status').addClass('online');
}
});
package.json
{
"private": true,
"dependencies": {
"gulp": "^3.9.1",
"express": "^4.16.2",
"socket.io": "^2.0.4"
}
}
I was searching in google and StackOverflow about this issue but those solved didn't work for me.
Thanks so much.
Try connecting using only domain without http like:
var socket = io.connect(window.location.hostname+':3000', {transports: ["websocket", "xhr-polling", "htmlfile", "jsonp-polling"]});
It will automatically become ws://sub.domain.com:3000/socket.io/?EIO=3&transport=polling&t=MFUVMS5. I'm using similar to this and working fine.
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.
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