I'm using gulp-connect-php to try and run a php server locally with BrowserSync. Here's my gulp config file:
var gulp = require('gulp'),
connect = require('gulp-connect-php'),
browserSync = require('browser-sync');
gulp.task('connect-sync', function() {
connect.server({}, function (){
browserSync({
server: {
baseDir: "app"
},
// proxy: '127.0.0.1:8000'
});
});
gulp.watch('**/*.php').on('change', function () {
browserSync.reload();
});
});
gulp.task( 'default', [ 'connect-sync' ] )
The above code works when I have a index.html file in my app directory but when I replace it with an index.php file I get the following message:
Cannot GET /
Not exactly sure what i've done wrong here?
What I understood from your question is that php serve is not recognizing .php files. There are 2 ways to get this work.
Apache (httpd.conf), search for DirectoryIndex and replace the line with this (will only work if you have dir_module enabled, but that's default on most installs) or add index.php
DirectoryIndex index.php index.phtml index.html index.htm
or
Create a .htaccess file in your web root.
Add the line...
DirectoryIndex index.php
Hope this helps!
You need to declare a index filename, add and index object to server.
...
browserSync({
server: {
baseDir: "app",
index: "/index.php"
},
});
...
You could also set browserSync startpage to /index.php instead of /
Edit I couldn't get startPath to work, so use index as in the example above.
...
browserSync({
server: {
baseDir: "app"
},
startPath: "/index.php"
});
...
#pramod-patil I don't think Apache directions will help here, since browserSync doesn't use Apache for serving PHP.
Related
I am using nuxt.js sitemap-module to generate sitemap.xml
It working perfectly with npm run build && npm run start on local.
However, it won't work when it's on the cloud with Nginx. https://vtapau.com/sitemap.xml
Here is my Nginx config
server {
listen 80;
server_name vtapau.com www.vtapau.com;
location / {
proxy_pass http://localhost:8081/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_redirect off;
}
}
First of all, I really has no idea if this is valid answer to you as you mentioned you've put manually created sitemap into static folder.
I think you misconfigured the sitemap, for sitemap.xml to work, you set routes inside sitemap object:
// nuxt.config.js
{
sitemap: {
hostname: 'https://example.com',
gzip: true,
exclude: [
'/secret',
'/admin/**'
],
routes: [
'/page/1',
'/page/2',
{
url: '/page/3',
changefreq: 'daily',
priority: 1,
lastmod: '2017-06-30T13:30:00.000Z'
}
]
}
}
When I was asked to select language, I suspected that your sitemap has split into different languages. I managed to get English version sitemap here.
If your sitemap configuration is like below:
// nuxt.config.js
{
sitemap: {
hostname: 'https://example.com',
lastmod: '2017-06-30',
sitemaps: [
{
path: '/sitemap-foo.xml',
routes: ['foo/1', 'foo/2'],
gzip: true
}, {
path: '/folder/sitemap-bar.xml',
routes: ['bar/1', 'bar/2'],
exclude: ['/**']
}
]
}
}
You should able to get your sitemap at https://vtapau.com/sitemapindex.xml. I hope this is not the static xml you've created otherwise nothing I could help already. This documentation was clearly mentioned at sitemap-module, when things configured wrongly always go back to the github documentation or find answer through github issues there.
Also great to see Malaysia new startup in food delivering.
I faced the exact same issue. Then I found out that the in the production server the Nuxt server were started using nuxt start instead of what I was using nuxt-ts start locally. Which it was the issue in my case. Hope this help you.
Restart your PM2 server after you run npm run build. Otherwise, the /sitemap.xml will not appear.
This has been the case for me.
My config for sitemap module:
sitemap: {
hostname: 'https://example.com',
gzip: true,
exclude: ['/exampleurl']
}
I fix the same bug on AWS lambda deployment using Typescript config file nuxt.config.ts.
To fix it replace const config: NuxtConfig = { }
to module.exports = { }
I have setup gulp.js to live reload in my browser. First of all here's how my gulpfile looks like
gulp.task('browser-sync', ['nodemon'], function() {
browserSync.init(null, {
proxy: "http://localhost:5000",
files: ["public/**/*.*", "views/**/*", "server.js"],
port: 7000,
});
});
now whenever I change something in my views/ or public/ directory the live reload works. However, whenever I tried to change something in my server.js the live reload will not work. Not sure what it is doing this. Please point me to the right direction. Thank you
Try it this way:
browserSync.init({
files: ["public/**/*.*", "views/**/*"],
port: 7000,
server: 'server.js'
});
I am using a Grunt connect web server to serve JS and CSS files locally.
Grunt-contrib-connect: https://github.com/gruntjs/grunt-contrib-connect
The Grunt task looks like the following:
connect: {
server: {
options: {
port: 9001,
base: '<%= templateDir %>/interface/build/',
livereload: true,
debug: true
}
}
}
It servers JS files correctly, but all the CSS files served are empty.
The following are the local URLs being used to access the files:
JS URL: http://localhost:9001/production.js
CSS URL: http://localhost:9001/production.css
Any assistance or thoughts is greatly appreciated!
Turns out the templateDir config variable was not empty, but did not result in an error. Thing that threw me was the mapped to directory actually existed with files of the exact same name.
Solution was to pass in the variable when registering the task:
grunt.registerTask('serve', [
'set_config:templateDir:<%= pkg.templateDir %>',
'connect',
'watch'
]);
I'm trying to use grunt-express and grunt-watch. I would like the server to reload with I change my server file.
Here is what I got.
Gruntfile.js
var path = require('path');
module.exports = function(grunt) {
grunt.initConfig({
express: {
options: {
port: 8000
},
load: {
server: path.resolve('./app')
}
},
watch: {
express: {
files: ['app.js'],
tasks: ['express:load']
}
}
});
grunt.loadNpmTasks('grunt-karma');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-express');
grunt.registerTask('server', ['express:load', 'express-keepalive', 'watch']);
};
app.js
var express = require('express');
var app = express();
var server = require('http').createServer(app);
app.get('/', function(req, res) {
res.sendfile(__dirname + '/public/index.html');
});
exports = module.exports = server;
exports.use = function() {
app.use.apply(app, arguments);
};
When I type grunt server in the console I get:
Running "express:load" (express) task
Running "express-server:load" (express-server) task
Web server started on port:8000, no hostname specified [pid: 21115]
Running "express-keepalive" task
The server start up fine and I can go to localhost:8000 to view my page. The watch task doesn't seem to start and when I make changes to app.js it doesn't restart. I basically want type grunt server and then when any changes happen to app.js, I want the server to restart. I've tried using the serverreload option, but I can't seem to get that to work either. I have also tried using express-restart (in place of express:livereload) in the watch:express task, but it says
Warning: path must be a string Use --force to continue.
After some playing around I was able to get it working, with an annoying issue. Here's the core of the Gruntfile:
var path = require('path');
module.exports = function (grunt) {
grunt.initConfig({
express: {
options: {
port: 8000,
hostname: '*'
},
livereload: {
options: {
server: path.resolve('./app.js'),
livereload: true,
serverreload: true,
bases: [path.resolve('./public')]
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-express');
grunt.registerTask('default', ['express', 'express-keepalive']);
};
However there seems to be an issue where a different port is used every other save. If the other server reload option is working I would stick with that for the time being.
As a side note, it appears this grunt plugin also listening on the port which means the start app.js should return itself with module.exports = app; rather than the default express http.createServer. It appears both will run simultaneously as long as different ports are specified.
I setup Yeoman 1.0 beta to handle my js/css tasks. Everything works fine that, if I run grunt server, it starts up a static server and connects a browser session to port 9000 (livereload). js/css concat, minification are also working.
Now, is there a way I can make it to connect to a google app engine development server (instead of starting a static server). The server is running at port 8080 on localhost, and I want grunt to reload the webpage upon css/js files under watch. These files would be served by GAE server.
I see a section rolling your own at grunt-contrib-connect documentation, but not sure it means an external server. As far as I see, these are the relavent configuration from Gruntfile.js
connect: {
livereload: {
options: {
port: 8080, //*** was 9001 originally **
middleware: function (connect) {
return [
lrSnippet,
mountFolder(connect, '.tmp'),
mountFolder(connect, yeomanConfig.app)
];
}
}
},
When I change the port number to 8080, and try to start, obviously it gives error.
Fatal error: Port 8080 is already in use by another process.
so, I don't want to start a new server, but connect through GAE server already running.
Thanks.
In order to use GAE server instead of nodejs server, we need to do the following.
* Compile your less/coffeescript, concat[, minify], copy your code to the location where the app engine code resides.
* Create a task in grunt.js to spawn a shell command to run app engine.
This is the example, that I used as reference. https://github.com/cowboy/grunt/tree/master/tasks
Following grunt.js file may help!
module.exports = function(grunt) {
grunt.initConfig({
....
});
grunt.registerTask('appengine-update', 'Upload to App Engine.', function() {
var spawn = require('child_process').spawn;
var PIPE = {stdio: 'inherit'};
var done = this.async();
spawn('appcfg.py', ['update', 'build/task-manager-angular'], PIPE).on('exit', function(status) {
done(status === 0);
});
});
grunt.registerTask('clean', 'Clean the whole build directory.', function() {
require('child_process').exec('rm -rdf build', this.async());
});
grunt.registerTask('run', 'Run app server.', function() {
var spawn = require('child_process').spawn;
var PIPE = {stdio: 'inherit'};
var done = this.async();
spawn('dev_appserver.py', ['.'], PIPE).on('exit', function(status) {
done(status === 0);
});
});
});
//....
//Other settings
//....
grunt.loadTasks('tasks');
grunt.loadNpmTasks('grunt-coffeelint');
grunt.registerTask('build', 'coffee less concat');
grunt.registerTask('deploy', 'coffee less concat build appengine-update');
grunt.registerTask('default', 'coffee less');
};
Found this Google App Engine management plugin for Grunt