I am using Meteor 1.0.2.1 and iron:router 1.0.7. I have managed to set up a route for '/' which works fine locally however when I deploy on meteor I get the iron:router splash.
Here is my route:
Router.route('/', {name: 'landing.index'});
and I have a controller called LandingIndex and a template called LandingIndex as well.
Any help is greatly appreciated.
edit:
The controllers looks as follows:
LandingIndexController = RouteController.extend({
waitOn: function () {
},
data: function () {
},
action: function () {
this.render();
}
});
In my case I had duplicate templates. A quick look at the console pointed out the problem.
Are you by any chance using Twitter Bootstrap? I ran into this same problem today, non-reproducible on localhost as well. After way too many hours of trying to reproduce this on a remote env with meteor deploy xxxxx.meteor.com, I figured out that it was because of a file contained within Twitter Bootstrap. If you straight up download the .zip file of bootstrap and indiscriminately copy its 3 directories into your project (css/ fonts/ js/), js/npm.js will be copied along with it.
I think js/npm.js is only needed during the build process with Grunt, so I just deleted it. It solved the issue for me, although I'm not sure why...
For me the problem was some files that came from another branch and stayed "untracked" in Git, so I overlook them.
But it looks like mup deploys everything, so it deployed this incorrect files too. In addition to that, Iron Router must be catching exceptions from other stuff, so it showed its splash page.
Just removed the untracked files and the problem was solved with another deploy!
Related
I just installed Jekyll and generated a new site and modified almost nothing of the default configuration.
I can serve it well locally.
But when I push the source code to Github Pages or deploy it on Gitlab with a build script, I have the same result: the CSS doesn't load.
I haven't changed anything in the layout. I thought this would be the kind of feature that should work by default.
The repo:
https://github.com/bmrejen/jekyll_blog
The Github Pages:
https://bmrejen.github.io/jekyll_blog/
It says
"Could not find the original style sheet."
Try to add this in jekyll_blog/_config.yml
baseurl: /PROJECT
url: http://USERNAME.github.io
I saw in your history you deleted the URL & baseurl and insert it wrong.
If you still can't understand how to insert, you can watch this tutorial, it's cover it:
Hosting on Github Pages
I just added iron:router package to my meteor project and now at the end of my website it shows this
and i can't find it in my html file to delete it,
How can i remove it from my website?
It will disappear when you add any route in your JS file. Add the following empty route to your JS file and start from there.
Router.route('/', function () {
});
Also read the iron-router docs about getting started.
http://iron-meteor.github.io/iron-router/
I've been playing with Angular yeoman generator. Very nice configuration I have to say. Everything looks great except one thing. Although in local (grunt serve) the external html templates of the directives play perfectly fine, when I make the build and run it on the server, the html templates (files) associated with directives are missing! (everything else plays perfectly fine).
for example, the template in the directive defined as
templateUrl: '../../views/usernavmenu.html',
in dev mode it's all fine, but in dist (live) the file is not concatenated and built in the js (as it is happening with the controller related views). Browser requests /views/usernavmenu.html which as such results in 404.
Expected behaviour would be for grunt tasks to build the template in the js file as it does for all other views.
Anyone with similar issue? Any ideas?
Here is the gruntfile
Solved it by changing the templateUrl
templateUrl: 'views/usernavmenu.html',
just to save time for anyone else who might be looking :)
Im trying to adopt JSPM as my package manager for Wordpress development but im failing at loading the main app file.
This is usually done with
<script>
System.import('./app');
</script>
The problem im running into is that jspm fails to load this file, trying to load in context of the current browser path http://localhost:3000/shop/app.js instead of the file system context.
I've tried to adjust some of the jspm's configuration options but couldn't get it to work.
Can you point in the right direction here?
When running on file:/// URLs, you need to set your baseURL to the current path. This can be done with:
System.config({ baseURL: '.' });
Either in your configuration file or in the page itself. Note that when you load pages on different path levels, this baseURL path needs to be adjusted so it may be advisable to specify it in the page itself.
I've moved my front-end workflow over to Gulp and am having a wicked time when developing static sites. I currently use BrowserSync, which spins up a server and reloads my page every time a change is detected – it's wonderful.
I was wondering if there is way to do this with WordPress when using MAMP? With MAMP PRO obviously using its own servers, is there a way I can tell my gulpfile.js to use BrowserSync while I'm running a WordPress site locally?
Hope that makes sense. Any help is appreciated. Thanks in advance!
I had to somewhat solve this issue for the company where I work.
The result of that work can be found here: https://github.com/MozaikAgency/wp-theme-bootstrap Feel free to browse, use and contribute :)
Note: The following does not specifically refer to MAMP because if you have node and gulp installed on your system it will work irrespective of where the site itself is being hosted/running from. The server running WordPress and the server that browser-sync will spin up are separate and unrelated. For reference we use this alongside XAMP at work to develop our WP themes
Specifically we wanted to have a development environment with all the bells and whistles (and that definitely includes browser-sync), but have a built theme that was clean from development cruft (browser-sync snippets, gulpfile.js etc).
The idea is, you would write only in the dev theme, let's say wp-contents/themes/example-theme_dev, and gulp would handle everything it needs to do, to generate the built theme, into let's say wp-content/themes/example-theme.
Note: This is not a tutorial, just an overview of some things that should be happening to get browser-sync to work with a WordPress setup. You can check out the repo itself to see the full way we tied everything together.
Browser-Sync Implementation
Since we are anyway moving files over from the "dev theme" to the "built theme" we get a chance to transform those files before shifting them over.
During dev mode (default gulp task), one of the transformations will specifically inject the following snippet into the bottom of your theme's functions.php
/**
* DEVELOPMENT MODE ONLY
*
* Browser-sync script loader
* to enable script/style injection
*
*/
add_action( 'wp_head', function () { ?>
<script type="text/javascript" id="__bs_script__">//<![CDATA[
document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js'><\/script>".replace("HOST", location.hostname));
//]]></script>
<?php }, 999);
This action will print out a script into your theme's head to link up to the browser-sync server and will handle all page refresh/injections your build process throws at it.
The actual server that this script points to is booted when you run the following gulp task (also called with the default gulp task):
var browserSync = require('browser-sync');
/**
* Spin up the browser-sync
* socket server to listen for
* and push code changes to the
* browser
*
*/
module.exports = function (done) {
browserSync({
logSnippet: false,
server: false,
open: false,
reloadDelay: 100,
reloadDebounce: 100
});
done();
};
So, you have your browser-sync server up and running and your theme can now update automatically using the script snippet, now all that is left is telling browser-sync what it should update and when.
For this, I found that the best way to approach it was to explicitly tell browser-sync to update right after any transforming gulp tasks, like sass to css processing, were done running. Mostly you just need to add the following to the end of your gulp tasks:
.on('end', browserSync.reload);
where browserSync is simply:
var browserSync = require('browser-sync');
Wrap up
This answer covers the basics you'll need to get browser-sync into your WP workflow. You can check out the wp-theme-bootstrap repo where we put all of this together to see the entire picture of how it works and try it out for yourselves, if you are interested.
We've been using this successfully now at the company for a while now. Hope you find it useful and if you have any suggestions feel free to chime in.