The title pretty much says it all. I'm on Windows 10, and I have a node app that I start with npm start. (I know almost nothing about node.js.) The app runs on gulp.js. I need the app to open in Firefox, even though Chrome is my default browser. How can I do this? Here's the code that opens the app now; the docs don't allude to there being such an option for the open parameter:
gulp.task('webserver', function() {
gulp.src('./app')
.pipe(webserver({
livereload: true,
open: true,
defaultFile: 'index.html',
port: serverPort
}));
});
Install gulp-open by typing the following in to your console
npm install gulp-open --save
Add the following to the top of your gulpfile.js
var open = require('gulp-open');
Add the following to the end of your gulpfile.js
gulp.task('browser', function(){
var options = {
uri: 'localhost:<enter the port you are using here>',
app: 'firefox'
};
gulp.src(__filename)
.pipe(open(options));
});
Add 'browser' to your gulp default. This is what actually opens the browser at the port you are running your app on
gulp.task('default', ['webserver', 'browser']);
in console type gulp
Related
I have some code that was generated by Appium Recorder. When I try to run node test.js it says "driver.init is not a function"
I ran npm install webdriverio in the same directory and I have the node_modules directory there.
Here is the contents of test.js:
// Requires the webdriverio client library
// (npm install webdriverio)
// Then paste this into a .js file and run with Node:
// node <file>.js
const wdio = require('webdriverio');
const caps = {"platformName":"android","platformVersion":"6.0.1","deviceName":"Nexus","automationName":"Appium","browserName":"Chrome"};
const driver = wdio.remote({
protocol: "http",
host: "localhost",
port: 4723,
path: "/wd/hub",
desiredCapabilities: caps
});
driver.init()
.element("com.android.chrome:id/url_bar")
.setValue("https://www.google.com/")
.end();
I expect the code to run, but it says TypeError: driver.init is not a function
it seems to depend on the version of webdriverio you are using. I got the same issue when working with the latest version, but with "webdriverio": "^4.6.1", it works. If you go on the Getting Started section, you'll see the new way to use the module : https://webdriver.io/docs/gettingstarted.html
Hope it helps
I am writing an office addin using office-js with React. My addin sideloads and works alright but I'm running into issues deploying it.
Steps to reproduce:
Create a trial react app (addin) using the instructions here: https://learn.microsoft.com/en-us/office/dev/add-ins/quickstarts/excel-quickstart-react and https://github.com/OfficeDev/generator-office.
Sideload the addinusing npm start and everything works well when served via the dev server -- everything works well!
Try serving the add-in statically in one of the two ways (I made sure the manifest is updated appropriately):
HTTP: npm install -g serve and then serve -s dist
or
HTTPS using a server like express:
express = require("express");
https = require("https");
const PORT = 3000;
const SERVER_ROOT = "dist";
var fs = require('fs');
var server=express();
var staticOptions = {
dotfiles: 'ignore',
etag: false,
extensions: ['htm', 'html'],
index: false,
maxAge: '1d',
redirect: false,
setHeaders: function (res, path, stat) {
res.set('x-timestamp', Date.now())
}
}
server.use(express.static(SERVER_ROOT, staticOptions));
var sslOptions = {
key: fs.readFileSync('certs/server.key'),
cert: fs.readFileSync('certs/server.crt')
};
https.createServer(sslOptions, server).listen(PORT, function(){
console.log("Server started.");
console.log("Listening on port:" + PORT);
});
On loading the add-in, the task pane is blank.
Firing up a debugger or the F12 IE Chooser tool throws the exception:
0x800a139e - JavaScript runtime error: Office.js has not fully loaded.
Your app must call "Office.onReady()" as part of it's loading sequence
(or set the "Office.initialize" function). If your app has this
functionality, try reloading this page.
6.Opening the html page on a web browser complains that React and ReactDOM are undefined (happens in index.tsx, but I think eventually the modules get loaded) and then subsequently throws the same exception "Office.js is not fully loaded".
-- In case it helps, I'm using react 16.2.0 and I'm on Office 365 desktop, version 1807, build 10325 (monthly channel).
-- Also, is there a way to avoid hosting on a server and just using a manifest (in a shared folder) pointing to another shared folder? I'm thinking browserify or something similar (but browserify didnt work either and I guess webpack might be the reason). [I did see the documentation about deploying addins, but they are not very helpful in this case].
I have searched around but no posts pinpointed the pitholes to avoid when using Gulp's BrowserSync with a localhost testing environment. So here is this post.
I am using gulp browser-sync, doing testing with MAMP. Right now I cannot get my browser-sync watch to work. I want to reload browser whenever I save my files.
Under MAMP settings,
Apache port: 80
Nginx port: 80
MySQL port: 3306
gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync'); // create a browser sync instance.
//tasks for development
// Start browserSync server
gulp.task('browserSync', function() {
browserSync({
server: {
baseDir: "app"
},
proxy: "localhost:8080" // can be [virtual host, sub-directory, localhost with port]
});
gulp.task('watch', ['browserSync'], function () {
gulp.watch('app/*.{php,css,js}', browserSync.reload);
});
Since we are talking about MAMP here, my directory is in htdocs/test as shown below:
Also, my index.php file is inside /app
I am thinking I have made mistakes on many levels but right now any combination of my solutions doesnt seem to help and Ive spent hours on this. Any suggestions?
Finally got it to work.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
gulp.task('default', function() {
browserSync.init({
proxy: "http://localhost/test/app"
});
gulp.watch("./app/*.php").on("change", browserSync.reload);
});
Few things to look out for that the documentation might not explicitly mention:
Do not miss out .create and .init() as we are referring to an instance here.
If you are using some test local server like MAMP, be careful to use 'proxy' instead of 'server'.
Note the URL address I am using refers to the position of the index.php
Lastly, '.on("change", browserSync.reload)' to RELOAD on CHANGE.
Hope my day spent on this saved you some time.
I was struggling with this and found an updated solution that works w/ both MAMP and custom local dev proxies.
In the gulpfile.js gulp.task( 'browser-sync', function() block I removed:
browserSync.init( cfg.browserSyncWatchFiles, cfg.browserSyncOptions );
and replaced with
browserSync.init({
proxy: "your/local/dev/url/here"
});
Hope that saves someone some time!
I'm learning Gulp and NPM and decided to test myself by using Browser-Sync with a PHP project I'm working on (using XAMPP). I know Browser-Sync doesnt work with PHP files, but I wanted to use it with my .css files (and later on perhaps add Sass).
I installed npm, Gulp, Gulp-watch and Browser Sync to my project's root directory and all seemed fine.
I then created a gulp.js file with the following:
var gulp = require('gulp'),
watch = require('gulp-watch'),
browserSync = require('browser-sync').create();
gulp.task('watch', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
watch('css/*.css', function() {
browserSync.reload();
});
});
However, when I gulp watch a new browser window does open but just shows the Cannot GET / error.
Also, the URL shows http://localhost:3002/ rather than http://localhost:myproejct
I read this may have something to do with my baseDir so tried:
baseDir: ""
baseDir: "./"
baseDir: "../myproject"
Would anyone know what I've done wrong?
You are doing way more than is necessary to do what you want. You can just use browsersync as a proxy layer over the top of your hosted site.
See the following example from the docs
# Proxy a PHP app + serve static files & watch them
$ browser-sync start --proxy 'mylocal.dev' --serveStatic 'public' --files 'public'
I think this is what you will need, run it from the physical root of your site and replace mylocal.dev with your php server address
npm install browser-sync -g
browser-sync start --proxy 'mylocal.dev' --serveStatic 'css' --files 'css/*.css'
Your code works fine for me. Assuming your target HTML file works if opened in the browser manually: One common cause of the Cannot Get/ error is using an index file other than Browsersync's default expectation, index.html. Could that be the problem you're having? If you need a custom index file, you can set the index option:
browserSync.init({
server: {
baseDir: 'mybasedirectorypath',
index: 'notindex.html'
}
});
Fwiw, you can also do this more efficiently, and save yourself the weight of installing gulp-watch (this example adapted and simplified from this Browsersync docs example):
var gulp = require('gulp'),
browserSync = require('browser-sync').create();
gulp.task('watch', function() {
browserSync.init({
server: {
baseDir: './'
}
});
gulp.watch('css/*.css').on('change',browserSync.reload)
});
As for using a custom url, check out https://github.com/BrowserSync/browser-sync/issues/646 which has some solutions.
It would be nice to have the browser automatically reload the page when I change a project file. I have this node-express site with the server being defined in 'server.js'
However, I've tried different grunt configurations, but none of them caused the browser to reload on a file change although the 'watch' task prints a message that the file changed!
Here is the relevant grunt configuration:
watch: {
all: {
files: 'views/index.ejs', // for now only watch this file!
options: {
livereload: true
}
}
},
express: {
options: {
background: true,
error: function(err, result, code) {},
fallback: function() {},
port: 3000
delay: 0,
output: ".+",
debug: false
},
dev: {
options: {
script: './server.js',
node_env: 'development',
livereload: true
}
}
}
....
grunt.registerTask('server', [
'express:dev',
'open',
'watch'
])
};
And to run the task I do
$> grunt server
Can someone explain what is wrong with this configuration ?
thnx
You need to install the livereload browser plugin from http://livereload.com/
I am trying to use grunt livereload to reload css changes on my node.js pages. I am getting closer to solve my problem which is similar to yours. So from what i know so far and please correct me if i'm wrong you dont need to install "livereload browser plugin" right? I used grunt alone without node.js and i could just use livereload without installing "livereload browser plugin" i just had to add a line in my .html (the problem i run into with node is how to reload .ejs and i found this page/question on the way solving it) : so i dont know if installing the livereload thing is another way to do the script part or if this is the case like i mentioned in my problem if i want to live reload .ejs i have to install the plugin.