webserver with specified root folder via gulp task - npm

I've take a look at a few gulp server instances (currently using gulp-webserver) but I can't seem to find where to set the root folder for the server per the params I see here See code below:
gulp.task('webserver', function() {
gulp.src(debugFolder)
.pipe(webserver({
directoryListing: true
}));
});
I'm not sure what the gulp.src param does as it's not the root. The root is the folder that holds the gulp script. Am I missing something on this module or is there another module that will do this? Trying to keep things clean and simple.

Please don't use gulp-webserver for it, since it's not a Gulp plugin and has been blacklisted by the community. I'd suggest you to use BrowserSync, which does exactly what you need and is a lot more standalone. Check out this documentation or my little writeup here. It would work like this:
var browserSync = require('browser-sync');
gulp.task('webserver', function() {
browserSync({
server: {
baseDir: "./app/"
}
});
});
And it's able to do a lot more!

Related

Webpack can not resolve module

I need some guidance. I am experiencing an issue where webpack throws an error that it can not find a module . I was trying to add a require statement of a package(included as dependency). I got it working in another project where I don't need webpack. The code looks basically as follows:
context.subscriptions.push(
vscode.commands.registerCommand("vstodo.helloWorld", () => {
vscode.window.showInformationMessage(
"test"
);
const sfdx = require('sfdx-node');
sfdx.auth.web.login({
setdefaultdevhubusername: true,
setalias: 'HubOrg'
})
.then(() => {
// Display confirmation of source push
console.log('Source pushed to scratch org');
});
}));
My webpack config can be found here
I uploaded a simplified version of the repository here Repository
containing all the configuration files for rollup and webpack.
If I leave out the part starting at the require statement everything works again.
Any help on how to tackle this would be much appreciated, thanks
The vscode extension page has a short troubleshooting guide about this: https://code.visualstudio.com/api/working-with-extensions/bundling-extension#webpack-critical-dependencies.
They suggest the following solutions:
Try to make the dependency static so that it can be bundled.
Exclude that dependency via the externals configuration. Also make sure that those JavaScript files aren't excluded from the packaged extension, using a negated glob pattern in .vscodeignore, for example !node_modules/mySpecialModule.

Caching entire folder in service worker

I have a build folder which is generated via webpack, any idea how i can cache the entire folder, i tried the following but to no avail
self.addEventListener('install', e => {
e.waitUntil(
caches.open('notes').then(cache => {
return cache.addAll([
'./build/*',
])
.then(() => self.skipWaiting());
}))
});
self.addEventListener('activate', event => {
event.waitUntil(self.clients.claim());
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});
Any help on how i can cache the entire build folders' file. I am not using the webpack plugin, just written my on SW.
cache.addAll() takes as its parameter an array of URLs. './build/*' isn't an array of URLs, and that sort of wildcard pattern has no meaning when run inside of a service worker on users' browsers.
What you really want to do use a wildcard pattern that gets evaluated at build time, locally on the same machine that's performing your Webpack build, which will have access to the local files in your build/ directory and can generate a full list of them. You need to express that intent within your Webpack build process, not within the cache.addAll() run from your service worker.
There are a few Webpack plugins, like sw-precache-webpack-plugin and offline-plugin, that automate the process of expanding wildcards at build time and injecting the resulting list of files (along with versioning information, which is also super-important) into a service worker file, which in turn gets run in your users' browsers. You mention that you don't want to use a plugin and instead write your own service worker, but I'd recommend at least looking at the source for those plugins (or for the sw-precache project) since you're almost certainly going to end up following a similar approach.

I am getting a "Bad response from Chimp Server" in my console when trying to run a meteor app with velocity/cucumber testing on it

The error is not in my regular console, it's in my tail -f console. It won't run the tests at all. In my localhost:3000 velocity sidebar it also says chimp server error. I am not sure how to fix this, I am very new to velocity and cucumber so it could be a stupid mistake, but I couldn't find any information on this error anywhere.
could you provide us with the whole meteor log and also cucumber log? If possible - please do meteor reset first (be aware though that this will clean up your local mongodb, if you want to avoid that, at least clean the cucumber log - echo '' > filePath will work )
I ran into the same problem yesterday while trying to follow Josh Owen's now outdated cucumber tutorial. The error was coming from with the step definition file while not wrapping module.exports in a function like this:
(function() {
module.exports = function() {
// ...
}
});
It could also be that your test directory and files aren't structured correctly in your app.
It should look like this:
app/
tests/
cucumber/
features/
step_definitions/
my_steps.js
my_feature.feature
fixtures/
my_fixture.js
Let me know if that makes a difference. Also, this is a good place to start with velocity/cucumber: http://www.mhurwi.com/a-basic-cucumber-meteor-tutorial/
It's very basic but there isn't much out there for learning testing with Meteor.

E2E Testing for AngularJS App on another computer

I'm developing single page application on AngularJS for learning. My project is located on Apache HTTP Server on another computer, I use WinSCP synchronisation while developing so that it is always the last version of my work.
Halfway through (actually, when I has already finished the biggest part the application), I realized that I don't have any tests and I should learn how to test what I do not just manually. I decided to try writing E2E tests for my AngularJS application using Karma Test Runner.
I installed Karma via npm, initialized it (karma init test/karma.conf.js), but what happens now?
I tried karma start test/karma.conf.js it launches Chrome (as I stated in config) and says that
Karma - connected
Chrome 26.0 (Windows) is idle
even though in conf file there are specified my test file:
files = [
'test/first_test.js'
];
And that's what inside it:
describe('my app', function() {
browser().navigateTo('/');
it('should then be.', function() {
expect(browser().location().url()).toBe('/login');
});
});
Thanks in advance!
EDIT: I realized, it's not just 'Chrome is idle', there's also console log error:
Uncaught ReferenceError: browser is not defined
Any ideas? I'm so confused right now.
Browser is only defined inside of beforeEach. Try this:
describe('my app', function() {
beforeEach(function(){
browser().navigateTo('/');
});
it('should then be.', function() {
expect(browser().location().url()).toBe('/login');
});
});
Alright, looks like I solved it myself.
I should have added
ANGULAR_SCENARIO,
ANGULAR_SCENARIO_ADAPTER,
to the files property of karma config file. After that, I progressed a little bit, but still got a lot of troubles, but essentially the main was that I got error that resumeBootstrap was undefined. My app was using AngularJS 1.0.4, but it looks like Karma's Adapters are for 1.0.6+ only. Upgrading app to 1.0.6 helped with resumeBootstrap.
Regarding testing the app on external server:
proxies = {
'/': 'http://another.internal/app/'
};
and don't forget to change links to CSS and JS files in app's index.html from local (css/style.css) to web (//another.internal/app/css/style.css).

Using sass with expressjs

What is the best way to use sass with express.js framework. I am starting from teh point where I have already done
npm install sass
I believe previously with express 2.x one could do something like -
app.use(express.compiler({ src: pub, enable: ['sass'] }))
But with express 3.x it gives me error :
app.init();
return app;
} has no method 'compiler'
What is the alternative statement to include in express 3.x?
Similarly if one could let me know the same on how to plugin coffeescript that would be great help.
I have seen examples of using Cakefile to precompile, but is that the only solution? That would mean adding an extra step of running a Cake task. What advantage would that have as against something defined within express app.js / app.coffee.
I have looked at connect-assets (which does coffeescript but not sass) and somewhere one also mentioned about connect-assetmanager pre hook, but haven't been able to make that work.
https://github.com/visionmedia/express/wiki/Migrating-from-2.x-to-3.x says:
template engine compliance from engine.compile(str, options) => Function to engine.__express(filename, options, callback)