to learn meteor, I'm following Sacha Greif's book 'Discovering Meteor'. The current source code is reflected here-> https://github.com/stopachka/meteor-hackernews
Right now, I'm trying to add a 'discuss' link to the post_item, which is supposed to render the single post_item.
<template name="postItem">
<div class="post">
<div class="post-content">
<h3>{{title}}<span>{{domain}}</span></h3>
</div>
Discuss
</div>
</template>
The router looks like so ->
Meteor.Router.add
'/': 'postsList'
'/posts/:_id':
to: 'postPage'
and: (id) ->
Session.set('currentPostId', id)
Currently, If I type in to the browser
localhost:3000/posts/foobarid
It renders the corresponding post
But when i add the {{postPagePath title}}, the discuss button does not even show the href property. I'm assuming it's because it's not rendering anything.
Super new to Meteor here, any guidance greatly appreciated
A couple of points to note here:
First, the router package you are using with the tutorial, Meteor Router, has been deprecated in favor of a now-canonical routing package for Meteor, Iron Router. You can see this noted on the Meteor Router github page here, and you can find the Iron Router specifications here. I suspect you may be using an older version of the Discover Meteor book as well, as it now covers Iron Router in detail. If at all possible, I'd try to get my hands on a version of the book covering Iron Router as it will be the standard for the foreseeable future.
Second, you are correct that that href="" property is not showing up because it is not rendering anything. Specifically, in Meteor 0.8+, if the value of an attribute returns null, undefined or false, the attribute itself is removed. Read more here.
Lastly, while I'm not up to speed on the details of Meteor Router it looks on quick inspection like you would want to pass PostPagePath the id and not the title of the post, e.g. {{PostPagePath id}} or similar.
I ran into a similar issue with Router and discovered it had been deprecated
For me, the resolution was to install meteorite and add Iron-Router:
mrt add iron-router
Then you can route as follows:
Router.map(function() {
this.route('postslist', {path: '/'})
//read the docs for your next routing needs
});
I am assuming you already have meteorite installed, if you haven't and are using uBuntu or similar flavor you can easily setup using the following:
export PATH=~/.meteor/tools/latest/bin:$PATH //ensure you are in your project root directory
npm install -g meteorite //must have npm installed
Figured this out from this stackoverflow link
Related
I'm testing Nuxt 3 (RC for now), and really love it.
I made a very small front-end application ( no backend, 3 pages, a complex form with some formulas to display some results ).
it works nice locally, there is nothing related to backend, so
I obviously could used only Vue,
but for testing purpose and to go further, I would like to generate a PWA, host it on a dev server ( in a subfolder ) and try to install it on my phone.
It seems nuxt-pwa is not still compatible with nuxt 3,
according to this issue, I've installed kevinmarrec/nuxt-pwa-module,
It works partially ( well.. favion and icons is generated locally )
but I don't know how to configure nuxt.config.js:
the router didn't match the subfolder,
no styles or reactivity is working, I got only my html displayed
I don't even know which command to use : npm run build or generate
I've looked a couple of hours, unsuccesfully, so is there someone knowing some good resources explaining how to turn a Nuxt 3 app into PWA and solve my silly problems
thanks :)
Hey sorry for the late reply, but the API is similar to that of nuxt/pwa meaning configuration from nuxt/pwa will most likely work with the module. To confirm try adding the following pwa config to your nuxt.config.js and check if it works
meta: {
name: 'Demo Site',
description: "Some juicy description",
theme_color: "#dddddd",
},
Note: the name property changes the title of the page. The description adds a meta description tag and the theme_color adds a meta theme-color tag
You can find out more from https://pwa.nuxtjs.org/meta
Any of the commands build or generate will work, but preferably build
Note: There is a GitHub issue open on the Svelte repo for this very question.
https://github.com/sveltejs/svelte/issues/4838
While I understand that this may or may not someday become a feature of Svelte, what I am asking is how I can create a workaround today to support a third-party web component library like Shoelace or UI5, or Ionic with two-way binding?
Synopsis:
I have set up a Svelte app and successfully added a Web Component Library (Ex: Shoelace).
I write a line of code that uses two-way binding like:
<sl-input name="name" type="text" label="Name" bind:value={name}/>
I cannot two-way bind (bind:value={}) because the Svelte compiler doesn't recognize the valid bindings for the custom web components.
If there were a wrapper library that you know of, or some other thing I could do to make it work, that would be great.
I am not sure if this will work with libraries but it is worth a shot. For my custom component I just followed this answer.
Add this in your custom component:
<script>
export let onValueChange;
export let value;
$: onValueChange(value);
</script>
And add this when using the component (it will give an error until you add this)
<custom-component onValueChange="{(x) => value = x}"/>
Im using the login example from the Meteor React Tutorial
meteor add accounts-ui accounts-password
Its all ok but Im trying to find the file and change it but I dont know where is it.
This is my code:
import { Blaze } from 'meteor/blaze';
export default class AccountsUIWrapper extends Component {
componentDidMount(){
this.view = Blaze.render(Template.loginButtons,
ReactDOM.findDOMNode(this.refs.container));
}
componentWillUnmount(){
Blaze.remove(this.view);
}
render(){
return <span ref="container"/>
}
}
And i have installed meteor add useraccounts:materialize
How can I put the template on this?
You need to put your component inside /imports/ui/ directory and name the file as AccountsUIWrapper.jsx
So it will be saved as /imports/ui/AccountsUIWrapper.jsx.
Then you can import your wrapped component inside /imports/ui/App.jsx file with:
import AccountsUIWrapper from './AccountsUIWrapper.jsx';
And then use it in your React render function in the same file as:
<AccountsUIWrapper />
The tutorial lays it out pretty clearly, including all the filenames and locations. You should be able to access their GitHub repository for the same.
If you want, for reference, you can also take a look at my code at this particular step back when when I did this tutorial myself.
Update: For useraccounts:materialize
The useraccounts:materialize package that you have mentioned depends on useraccounts:core package as its base. So you cannot apply useraccounts:materialize to default meteor accounts package directly.
Follow the instructions on useraccounts:core to set it up. You may need to remove accounts-ui as well, as it would likely clash with the above packages.
Then, go through the documentation for useraccounts that shows how to render their accounts template in Blaze.
After that, using the same way as shown in the tutorial, you should be able to create a new React wrapper for useraccounts:materialize Blaze template.
Here are links to boilerplate useraccounts:materialize code for Iron Router and Flow Router. From these you can take reference for the Blaze template code, which you can then wrap in React:
Boilerplate with iron:router
Boilerplate with FlowRouter
I'm trying to merge large existing web app into sails.js. so I moved the folders into assets and build a custom route , 'GET /': '/assets/client/launch.html' and get 404 when I point my browser to http://localhost:1337/ as the / is correctly redirected to http://localhost:1337/assets/client/launch.html which produces the 404.
Now the file exists in the folder assets/client (and in .tmp), so I am thinking the Sails router is getting in the way.
I would leave the client (70K lines of JS) that generates all the UI dynamically and sailjs server that provides authentication separate and enable CORS but my customer wants client packaged with server. This type of operation is simple in frameworks like ASP.NET MVC but am wondering if Sails is up to the task.
Well, If everything you tried did not work out. There might be another solution ,
First of all since you are talking about sails app I am assuming other bundle must be sails as well ,
So here is what you do-
Change the port for another app that you want to attach to this.
Second whenever you want to go to page on another app simply redirect the client to another port ie
in html or esp put a href tag with different port.
<a href="localhost:PORT/route_to_file">
</a>
I got it working by placing my app into assets where we need to launch from assets/client/index.html as there would be too many dependencies to change. As I said above could not just add a route as Sails must getting in the way. However as in Chapter 3.2.2 of Sails in Action I generated a static asset npm install sails-generate-static --save. then I redirected to assets/client/index.html. As an aside that book is great and would highly recommend it.
I am brand new to NancyFX and currently enthralled by its low-ceremony approach to web application development. Throwing myself in at the deep-end, I also want to use CoffeeScript and investigate the benefits of Sass.
The Set-Up
To enable this combination I have created a new Empty Web Application using the VS2010 template (found in the Nancy Accessories project). I have then used the VS PackageManager to Nancify my application and add the SassAndCoffee support:
PM> Install-Package Nancy
PM> Install-Package Nancy.SassAndCoffee
So far so good. I then created an ~/Content/scripts folder and in there I have placed a file called home.coffee containing the following line of CoffeeScript.
alert "Hello Nancy!"
Now things start to get a bit fuzzy. I want to run this script on the client so I create an view called ~/Views/home.sshtml (and associated NancyModule with Get["/"] route - not shown). The view's html looks like this:
<head>
<title>Hello Nancy</title>
<script type="text/javascript" src="/content/scripts/home.js"></script>
</head>
<body>
<p>Hello #Model.User</p>
</body>
</html>
The view works just fine but the link to the home.js file just returns a 404: Not Found.
I am hoping that somehow Nancy will magically work out that I need my CoffeeScript compiled to JavaScript when it looks for the referenced home.js file and finds the home.coffee instead. This didn't work - so much for inspired guesswork.
If I change the script tag above to point to the existing home.coffee instead then the file is found but processed as a normal JavaScript file giving errors concerning the lack of tiresome ceremony namely: "unexpected string"
The Question
Now you know my set-up and simple requirements, here then is my question:
How do I get CoffeeScript to 'just work' using the NancyFX framework?
Thank you
Update
Steven Robbins (below) has answered this question by pointing to the demo code. But just in case you don't want to pull MBs of source from GitHub, here are the lines required to get things going. First add a class called Bootstrapper.cs to your project. Now add the following code (it worked like a charm for me):
public class Bootstrapper : DefaultNancyBootstrapper
{
protected override void ApplicationStartup(TinyIoCContainer container, IPipelines pipelines)
{
base.ApplicationStartup(container, pipelines);
StaticConfiguration.DisableErrorTraces = false;
Hooks.Enable(pipelines, new InMemoryCache(), container.Resolve<IRootPathProvider>());
}
}
The SassAndCoffee project doesn't hook into the static content bit in Nancy, it (or something similar) may in the future, but at the moment it's just a separate pipeline hook.
If you take a look at the sample project on github:
https://github.com/NancyFx/Nancy.SassAndCoffee/tree/master/src/Nancy.SassAndCoffee.Demo
That should show you how to get it going.