I'm trying to get grunt working, with grunt-contrib-watch and grunt-contrib-compass.
So far, my Gruntfile looks like this:
module.exports = function (grunt){
grunt.initConfig({
compass : {
dist : {
options : {
debugInfo : 'true'
}
}
},
watch : {
files : ['*.html', 'js/*', 'sass/*'],
task : ['compass'],
options : {
livereload: true,
port : 35729
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch') ;
grunt.loadNpmTasks('grunt-contrib-compass') ;
grunt.registerTask('default', ['watch'])
} ;
I'm using chromes live-reload extension.
If I then run 'grunt -v', I can see that grunt watches my html and my sass files as expected. My browser tab reloads automatically, as expected.
In a browser tab I go to this address:
http://localhost:35729
However, in my browser I only see this upon loading and reloading:
{
tinylr: "Welcome",
version: "0.0.4"
}
I don't see my index.html. Just the object.
What do I need to do in order to see my site?
http://localhost:35729 is the address of the live reload server, not your website. Your website still needs to be served from it's own address/port, such as http://localhost:8000. Either through the grunt-contrib-connect task, some other node.js server or some server that serves files apache/nginx.
http://localhost:35729 is only used to load the live reload script into your page: <script src="http://localhost:35729/livereload.js"></script> and then upon changes will use a web socket to trigger and update your page on your website.
If you run with npm start, it will running on reload server.
So if you wanted to serve your website.
Try to use Multiplex
Related
I've just upgraded my project to Meteor v2.6 along with all packages. Everything runs smoothly on local so I pushed to Galaxy where I'm promptly met by this error when trying to load my app:
Nothing in the codebase itself was changed, needless to say the routes have been defined and have been working fine before.
Here's an excerpt of the code:
import "/imports/ui/layouts/dashboardLayout/dashboardLayout";
import "/imports/ui/layouts/landingLayout/landingLayout";
import "/imports/ui/pages";
import "/imports/ui/pages/landing/landingHeader/landingHeader";
if (Meteor.isClient && Meteor.isProduction) {
Router.plugin("reywood:iron-router-ga");
}
Router.configure({
trackPageView: true,
});
Router.onAfterAction(() => {
window.scrollTo(0, 0);
});
Router.route("/", {
name: "landing",
layoutTemplate: "landingLayout",
action: function () {
this.render("landingHeader", { to: "header" });
this.render("landingContent", {
to: "content",
data: { signUp: !!this.params.query.signUp },
});
},
});
Below the diff in the versions file>
Given it runs fine locally but has issues in Production, I wonder whether the problem is this bit of code here:
if (Meteor.isClient && Meteor.isProduction) {
Router.plugin("reywood:iron-router-ga");
}
I don't know why it's there (it's not my code originally) but I've noticed that the reywood:iron-router-ga version seems to have been downgraded for some reason during the upgrade:
When I try to force an update to reywood:iron-router-ga in the vain hope that by getting it back to v2.0.1 it will start working again, I get the message that "The specified packages are at their latest compatible versions".
Has anyone encountered this before/any idea what's going on? I'm not a fan of forcing different behaviour in Production from Dev as that obviously makes testing difficult/pointless - unless there's a good reason for it. Can anyone shed any light?
So I am using grunt to help me develop sites.
For last two weeks I am having issues with Browsersync/Watch.
When I am making changes to a php files, browsersync doesn't detect any changes. Even, when I am reloading the site manually, source code is not updated. Most funny part is, this code gets updated after "some time" or when I am restarting grunt.
watch: {
php: {
files: ['*.php', '**/*.php'],
}
},
// Run Browser Sync
browserSync: {
default_options: {
bsFiles: {
src: [
"**/*.php",
"*.php",
]
},
options: {
watchTask: true,
proxy: 'g.test',
}
}
}
Does anyone had familiar issue?
Do you have a body tag in your PHP files?
Also, when running grunt, do you have a script (like one below) injected under body?
<script id="__bs_script__">
//<![CDATA[document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.7'><\/script>".replace("HOST", location.hostname));
//]]>
</script>
I have created a custom module and added requires-config.js (app\code\Namespace\Modulename\view\frontend).
var config = {
map: {
'*': {
test: 'https://example.com/test.js'
}
}
};
After that I have deploy the static content, now I can see the external js has added in following location (pub\static_requirejs\frontend\Magento\luma\en_US),but still external js is not loaded in page source (using console).
Still I need to add the js files in layout?
<head>
<link src="https://example.com/test.js"/>
</head>
Its good practise to put your js in Modulename/view/frontend/web/js folder rather than loading from url.
var config = {
"map": {
"*": {
"test": "Modulename/js/test"
}
}
};
Also you don't need to add .js extenstion in the require js file.
then check it will load
Please clear the cache and also do static content deploy
I am attempting to add Facebook authentication into an Angular2-Meteor app that started off as the Socially app from the tutorial and is slowly being modified into something less generic. There doesn't seem to be much posted on this particular use case however.
Note: I've asked in the Meteor forums and Gitter without success already.
Here are the steps I've taken:
Added Service Configuration package using
meteor add service-configuration
Created a file at server/services.ts containing (with my actual keys):
ServiceConfiguration.configurations.upsert({
"service": "facebook"
}, {
$set: {
"settings": {
"appId": “appid”,
“secret": "secret",
"loginStyle": "popup"
}
}
});
But on compile, I get an error saying
cannot find name 'ServiceConfiguration'
Which makes me think the package didn't install properly, but uninstalling/reinstalling it has not resolved the issue and it is showing in my .meteor directory.
Client side I'm calling this method with a click event on a button in a component that does have Meteor imported:
facebook() {
Meteor.loginWithFacebook((err) => {
if (err) {
//Handle error
} else {
//Handle sign in (I reroute)
this.router.navigate(['/home']);
}
})
Which throws the console error
meteor_1.Meteor.loginWithFacebook is not a function
But I suspect this is secondary to the fact that ServicesConfiguration isn't registering.
Git repo of the project is here: https://github.com/nanomoffet/ng2-starter with the referenced files being server/services.ts and client/app.ts
Currently it is not possible to use the ServiceConfiguration in TypeScript. What I did in my application was that I created a Javascript file in which I did make the ServiceConfiguration calls.
meteor add service-configuration
Create the file ./server/service-config.js
Meteor.startup(() => {
ServiceConfiguration.configurations.remove({
service: "facebook"
});
ServiceConfiguration.configurations.insert({
service: "facebook",
appId: '<APP_ID_YOU_GET_FROM FROM_FACEBOOK>',
loginStyle: "popup",
secret: '<SECRET_YOU_GET_FROM_FACEBOOK>'
});
});
I only tested it with Google and works fine for me.
I can't seem to both reload the server and run sass in my gulp setup. Everything works fine if I save my styles.scss file twice. The server reloads but sass does not run when I only save once.
I've tried to run the 'sass' task as a dependency of 'serve' but that made things worse. Can someone please point me in the right direction?
//run sass
gulp.task('sass', function () {
return sass('client/scss/styles.scss')
.on('error', function (err) {
console.error('Error!', err.message);
})
.pipe(gulp.dest('client/css/'));
});
//run sass again when file is updated
gulp.task('watch', function(){
gulp.watch('client/scss/*.scss', ['sass']);
});
//reload server when sass file updates
gulp.task('serve', function() {
var server = gls.new('server.js');
server.start();
gulp.watch(['client/scss/*.scss'], server.notify);
gulp.watch('server.js', server.start);
});
//initial run
gulp.task('default', ['serve', 'sass', 'watch']);
The problem is that you're watching your scss files inside the serve task.
So the flow currently looks like this:
scss changed
watch task starts compiling sass AND server reloads page with old
css (too soon)
final css is compiled
If you then save scss for the second time, this all happens again and it's now OK because the css was refreshed during the first run.
You should be watching css files in the serve task. This way, the flow will be:
scss changed
watch task starts compiling sass
final css is compiled
server task reloads page with new css
So the solution is to simply change the serve task like this:
gulp.task('serve', function() {
var server = gls.new('server.js');
server.start();
gulp.watch(['client/css/*.css'], server.notify);
gulp.watch('server.js', server.start);
});