mantrajs / meteor-mantra-kickstarter Goto Github PK

I cloned the correct version of the repo, ran npm install, and then started meteor. The app starts up fine, but the browser is blank with these two errors in the console.

Cannot find module 'react-simple-di' 

There is no route for the path: /

I assume this might be some sort of module issue. I am still in the process of learning how to use modules. The mantra sample blog app works fine for me. Any ideas on what might be going wrong? Thanks!

Hi,

When running npm test I get the error message below. It seems to be caused by
mocha .scripts/mocha_boot.js client/**/tests/**/*.js --compilers js:babel-core/register
which is triggered by npm run testonly. Anyone else having this problem?

I have updated node and npm, but this has not resolved the issue. I also have tried a fresh kickstarter clone, same results.

...
  41 passing (705ms)
  9 pending
  1 failing

  1) _template.components.template should display the name title:
     ReferenceError: title is not defined
      at _class.render (template.jsx:10:14)
      at [object Object].ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (node_modules/react/lib/ReactCompositeComponent.js:587:34)
      at [object Object].ReactCompositeComponentMixin.mountComponent (node_modules/react/lib/ReactCompositeComponent.js:220:30)
      at [object Object].wrapper [as mountComponent] (node_modules/react/lib/ReactPerf.js:66:21)
      at [object Object].ReactShallowRenderer._render (node_modules/react/lib/ReactTestUtils.js:366:14)
      at _batchedRender (node_modules/react/lib/ReactTestUtils.js:348:12)
      at ReactDefaultBatchingStrategyTransaction.Mixin.perform (node_modules/react/lib/Transaction.js:136:20)
      at Object.ReactDefaultBatchingStrategy.batchedUpdates (node_modules/react/lib/ReactDefaultBatchingStrategy.js:62:19)
      at Object.batchedUpdates (node_modules/react/lib/ReactUpdates.js:94:20)
      at [object Object].ReactShallowRenderer.render (node_modules/react/lib/ReactTestUtils.js:343:16)
      at [object Object].render (node_modules/enzyme/build/react-compat.js:146:39)
      at new ShallowWrapper (node_modules/enzyme/build/ShallowWrapper.js:81:21)
      at shallow (node_modules/enzyme/build/shallow.js:21:10)
      at Context.<anonymous> (template.js:10:16)




npm ERR! Darwin 15.3.0
npm ERR! argv "/usr/local/Cellar/node/5.9.0/bin/node" "/usr/local/bin/npm" "run" "testonly"
npm ERR! node v5.9.0
npm ERR! npm  v3.7.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] testonly: `mocha .scripts/mocha_boot.js client/**/tests/**/*.js --compilers js:babel-core/register`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] testonly script 'mocha .scripts/mocha_boot.js client/**/tests/**/*.js --compilers js:babel-core/register'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the mantra-demo package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     mocha .scripts/mocha_boot.js client/**/tests/**/*.js --compilers js:babel-core/register
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs mantra-demo
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls mantra-demo
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/Sander/Desktop/temp/meteor-mantra-kickstarter/npm-debug.log

on the following error:

W20160205-17:02:57.283(9)? (STDERR) Error: The "collection" property has to be an instance of the "Mongo.Collection" in the "color" class
W20160205-17:02:57.283(9)? (STDERR) at Function.checkSchemaDefinition (packages/jagi_astronomy/lib/modules/storage/init_definition.js:227:1)
W20160205-17:02:57.283(9)? (STDERR) at Function.onInitDefinitionStorage (packages/jagi_astronomy/lib/modules/storage/init_definition.js:248:1)
W20160205-17:02:57.283(9)? (STDERR) at packages/jagi_astronomy/lib/modules/core/classes.js:27:1
W20160205-17:02:57.284(9)? (STDERR) at packages/jagi_astronomy/lib/modules/core/events.js:68:1
W20160205-17:02:57.284(9)? (STDERR) at Array.forEach (packages/es5-shim/.npm/package/node_modules/es5-shim/es5-shim.js:419:1)
W20160205-17:02:57.284(9)? (STDERR) at Function..each..forEach (packages/underscore/underscore.js:105:1)
W20160205-17:02:57.284(9)? (STDERR) at Object..extend.each (packages/jagi_astronomy/lib/modules/core/events.js:64:1)
W20160205-17:02:57.284(9)? (STDERR) at Function.methods.extend (packages/jagi_astronomy/lib/modules/core/classes.js:26:1)
W20160205-17:02:57.285(9)? (STDERR) at Object.Astro.createClass.Astro.Class (packages/jagi_astronomy/lib/modules/core/classes.js:80:1)
W20160205-17:02:57.285(9)? (STDERR) at meteorInstall.lib.color.js (lib/color.js:2:21)

Hi,

This isn't exactly related to what is currently in the repo, but as authentication and profile/accounts pages are partially implemented and stubbed out, this seems like it'll be relevant later.

I've been building out the profile page, but when a logout is triggered, just before the re-route, it raises Tracker recompute errors when the user data is suddenly missing.

Is there a graceful way of handling this, or is the only way to just null test the user record whereever it is used?

Thanks

Where is the email property coming from in the navbar, see this

I don't see any container for this component.

When running ESLint (as provided in kickstarter), I'm getting this error a lot:
error Parsing error: 'import' and 'export' may appear only with 'sourceType: module'

Is someone else also seeing these errors?

I have searched online, but cannot find a solution. Some similar(?) issue reports point to Babel version and parameters changed from babel 5 to 6.

Would love to use ESLint for Mantra, but it isn't helping me this way :).

Is there a proper way to setup the dochead for mantra? I'm using https://github.com/kadirahq/meteor-dochead but I'm wondering where to place it in the app. Should I make a separate file and import it into index or is there a better way to organize it? Thanks! Great repo by the way!

As mantra's mission is dedicated to modularity and high maintainability, it feels strange that all styles in the app are locked in a big old fashioned centralized .css.

I changed that for Radium which I didn't know and it works like a charm - just wrap the default layout and then you get clever inline styles wherever you want in the app.

export default class extends React.Component  {
render() {
  const styles = {
    myfavoritebutton: {
      color-background: 'fuschia'
      }
   };
etc.

then :

<Button style={styles.myfavoritebutton}></Button>

There are plenty of other solutions which I didn't try - this one appearing to be the most popular.

reproduction

1. http://localhost:3000/login
2. i log in successfully
3. i press reload in the browser and i get a blank page with in console:

modules.js?hash=bfe3e37…:23612 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of _class.

Hi,
I am facing below issue after I upgrade to Meteor 1.3 release through meteor update.

=> Started proxy.                             
=> Started MongoDB.                           

Unable to resolve some modules:

  ".dist/browser.js" in /home/user/workspace/meteor-mantra-kickstarter/node_modules/react-komposer/package.json (web.browser)

=> Started your app.                          

=> App running at: http://localhost:3000/

In react-komposer/package.json it is defined as :

"browser": ".dist/browser.js",
    "browserify": "12.x.x",

What can be the issue?

Just curious: why both in this kickstarter? When to choose one over the other?

I add Accounts.onCreateUser hook in server/main.js, but it never be triggered.

I can see that new user added into database but without onCreateUser logic applied, even server console didn't show anything. Here is code I added on main.js

Accounts.onCreateUser(function(options, user) {

  console.log("server on create user triggered");

  if (options.profile)
    user.profile = options.profile;

  // If this is the first user going into the database, make them an admin
  if (Meteor.users.find().count() === 0)
    user.admin = true;

  return user;
});

Anything I am doing wrong or I am missing at here?

When I run the kickstarter in 1.3 beta 8:
I get
Error: The "collection" property has to be an instance of the "Mongo.Collection" in the "_color" class

If I pull _colors from collections.js and use directly in colors.js, the error goes away.

import {Mongo} from 'meteor/mongo';

var _colors = new Mongo.Collection('_colors')

const Model = Astro.Class({
  name: '_color',
  collection: _colors,

Of course when I go test it, more things are broken, like method '.find' not found. But I'm not sure if this is an Astronomy or Meteor 1.3 problem.

I am working on a new 0.3 version. It is a rather significant refactoring effort, I simplified a lot of things and also started using kadira's react story book. I've been long eager to put redux in place and if it makes sense at this point also webpack.

I also made some progress with graphql and lokka for pagination which I think is a pretty cool way to address publishing data which not necessarily needs to be reactive.

What would be the preferred way of making a Mantra-site indexable by search engines? Is adding the spiderable package enough?

Hi,

This is great guys.
How about moving this repo to mantrajs org.

@makstr what do you think?

Hi,
According to mantra specs : If you need to redirect upon some condition (for example user is not authorized) use an action instead of route options like FlowRouter’s triggersEnter. Call the action from component or container’s composer function.

In colors module redirection is commented out as below:

meteor-mantra-kickstarter/client/modules/_colors/composers/colors/single.jsx

 if (Meteor.subscribe('_colors.single', _id).ready()) {
    const record = Collections._colors.findOne(_id);
    if (record) {
      onData(null, {record, error});
    } else {
      // FlowRouter.go('/colors');
    }
  }

Please help to figure out what is the proper way to redirect inside composers.

Thank you.

Hi,

These are my primary findings while working with the Mantra Kickstarter package during last week:

1. I really love it. Will be using it for all my new projects. Let me know if I can contribute, would love to join the team.
2. I had troubles integrating an existing template into the current template module, which I eventually removed manually. I have installed the less and huttonr:bootstrap3 Meteor packages, and the NPM react-bootstrap package. This really kickstarts front-end (Bootstrap powered) development. Unfortunately I'm not able to share the template code (copyright...), but let me know if I can help you integrate the mentioned packages into the Kickstarter app.

Enjoy your weekend,

Sander

I was curious as to why some modules are prefixed with an underscore and the convention around it?

Maybe because of react jsx, the call of a Astro Class methods from jsx does not have the "record" context, so the (current) record data is not usable:

see: /users
The collection should show a list of email addresses for the users collection.
No email address is shown, because the {record.firstEmail()} (from jsx) will call

return _.get(this, 'emails[0].address', null);

but "this" is not the expected "this" context for the record, its the window context of the browser

Hi,

Not sure if I'm mistaken about this, but take the comments module for example.

action/comments.js sets LocalState for errors in both the Meteor.call for posts.createComment as well as outside the Meteor.call.

• If you throw an error in the server-side action for posts.createComment, the error isn't displayed.
• If you throw an error in action/comments.js before the Meteor.call, it is.
• If you comment out return clearErrors in the corresponding container, the error set inside the Meteor.call callback is displayed, but is not cleared when you navigate to another page and then come back, it will only disappear if you hard reload.

Would this be because Meteor.call is asynchronous? What would be the best way of handling error (and success) messages set in the Meteor.call callback?

Hi,

When I'm running the app, I get a blank screen in the browser and the console complains:

'There is no route for the path: /'

When I uncollapse this message, this backtrace appears:

Router.prototype._notfoundRoute() kadira_flow-router.js:2206 Router.prototype._updateCallbacks/<() kadira_flow-router.js:2394 [3]</</Route.prototype.middleware/<() kadira_flow-router.js:607 nextEnter() kadira_flow-router.js:439 [3]</</page.dispatch() kadira_flow-router.js:445 [3]</</page.replace() kadira_flow-router.js:408 Router.prototype.initialize/</self._page[fnName]() kadira_flow-router.js:2241 [3]</</page.start() kadira_flow-router.js:301 page() kadira_flow-router.js:235 Router.prototype.initialize() kadira_flow-router.js:2250 <anonymous> kadira_flow-router.js:2691 maybeReady() meteor.js:825 loadingCompleted() meteor.js:831

Note that I experience the same problem with the 'Impossible' app from Ken Roger's new book.

So this must be some general problem related to the environment rather than the app.

Anybody any ideas?

TIA, Guido

Please see :

Kickstarter is an out-dated mess. Deprecate or renovate?

I tried to fix it by relative paths but still no luck :( .

Why not add meteor-webpack to this kickstarter, now that it has reached 1.0? As it's compatible with 1.3, we would only benefit from it :)

When deleting a user, the following Tracker error shows up in the console:

Exception from Tracker recompute function:
debug.js:41 TypeError: Cannot read property 'profile' of undefined
    at singleComposer (single.jsx:13)
    at index.js:221
    at Tracker.Computation._compute (tracker.js:323)
    at Tracker.Computation._recompute (tracker.js:342)
    at Object.Tracker._runFlush (tracker.js:481)
    at Object.Tracker.flush (tracker.js:441)
    at Router._invalidateTracker (router.js:489)
    at afterAllTriggersRan (router.js:101)
    at Object.Triggers.runTriggers (triggers.js:89)
    at route._actionHandle (router.js:105)

What is role of Astronomy Classes in Mantra? It seems limited to defining a schema for validation. Where were are the classes and methods invoked (e.g. Actions, Containers, Components etc.).

I've been working on a personal project with this kickstarter package. I think the _colors module is a great example module, but this kickstarter is not intended as a sample project. It is intended to kickstart new mantra projects. I now need to manually remove it before actually starting to write some code.

_Can we move the colors module to a kickstarter example repo or simply drop it?

In order to make an ecosystem of general-use component modules, it seems likely that you'd soon need a way to connect to an activity stream that logs and notifies updates from a variety of modules. And you would want content to be indexed so that they are available in a unified search.

Looking into activity streams on node, I came across activitystrea.ms API (https://www.npmjs.com/package/activitystrea.ms), so there's already a standard data structure for this. There is also Activity Streams App (https://www.npmjs.com/package/activitystreams), which uses Neo4J and Redis.

Then there's unified search, a necessity in many use cases, so somehow the modules would need to define how to index fields for search. Is there away to attach onto collections, and should module authors be encouraged to specify search index definitions?

Both of these would require a bit more from a module author, so I'd suggest that both Activity Steam and Search Indexing it could be optional.

I have been considering the idea of a system with goals similar to Mantra's (and perhaps it will itself be a Mantra app), but I'm still writing out the proposed specs before I post it.

I am getting TypeError: Collections is undefined on meteor 13 beta 11.
Collections inside composers can not been identified.

export const collectionComposer = ({context}, onData) => {
  const {Meteor, Collections} = context();
  if (Meteor.subscribe('_colors.list').ready()) {
    const collection = Collections._colors.find().fetch();
    onData(null, {collection});
  }
};

What can be the issue?

I just find out Atellier which looks pretty cool, and as it became more and more accepted as a good practice to develop, test, and document individuals components outside the context of the main application but instead in a playground environment, I think something like Atellier would be good to have in a Mantra starter kit.

It sure is not easy to run different servers in a clean way with the current Meteor build-tool but since you already have done that for Graph_i_ql (I haven’t looked at the implementation), I’m putting Atellier on the table.

Hi,

In the Astro model definition for the color collection the behaviors module is commented out. Enabling it doesn't work.
There is no error message in the console, but the fields and values don't appear in MongoDb upon inserting new colors. Any clue how to enable this timestamp behaviors module?

Sander

What's would be the preferred way for implementing LESS support? Should I use the meteor package, or a NPM package with some config?

If NPM is preferred, how should I configure this?

Where did you obtained the boostrap components for the Flatly theme?

Forgive me if this is the wrong place to ask this question, but I'm trying to figure out the best way to have a save button appear on rows that have been modified. Right now I have something like the following:

{parts.map(part => {
              debugger;
              const saveButton = part.isModified() ? (
                <Col md={1}>
                  <Button onClick={this.savePart.bind(this)} bsStyle="primary" type="button"><i className="fa fa-save" /></Button>
                </Col>
              ) : '';
              return (
                <Row key={part._id}>
                  <Col md={3}>
                    <FormGroup>
                      <FormControl ref="theme" type="text" placeholder="Theme" value={part.theme} onChange={this.changeField.bind(this, 'theme', part)} />
                    </FormGroup>
                  </Col>
                  // More fields here//
                  {saveButton}
                </Row>

in my changeField event handler I'm doing this:

changeField(field, obj, event){
    obj[field]=event.currentTarget.value;
  }

The problem is that the component is not getting re rendered when a field is changed, so the saveButton never appears. Should I be doing this differently?

In client/modules/_colors/components/colors/_single.jsx there is a function deleteRecord

What is the appropriate way to use the same function or other functions in the collections view?

Hi,

I'd suggest to include jQuery from npm instead of using the meteor package. I see it's now included by default in the meteor package list.

If I want to adhere to the 'pure' Mantra specs, I should now do:

import { Meteor } from 'meteor';
import { jQuery } from 'meteor/jquery';

I think the preferred Mantra way would be:

import { jQuery } from 'jquery';

I have not been able to test this yet. But I think this approach is much cleaner for isolated component development/testing.

Kind regards,

Sander

How did you get the bootstraps functions to be available in client? I tried swapping out the flatly template by another bootstrap theme. The components render nicely, but the bootstrap js functions are not triggered (i.e. dropdown). Can't figure out how you did that.

I am getting this error while changing just (any) the UI text in Profile component https://github.com/mantrajs/meteor-mantra-kickstarter/blob/develop/client/modules/app/components/AccountProfile/Wrapper.jsx
invariant.js:45Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of_class``

Works in Incognito or after clearing cache. Any idea how can I resolve this please?

In the read me it says there is pagination, so I'm looking through the codebase to find it, but i can seem to find it, can someone point me in the right direction?

The package.json for this repo had two loaders: raw-loader and 'style-loader' aren't those for Webpack? Also is the jsdom package actually used? These aren't critical, just trying to clean my clone up and not have any stuff that's not needed. If they aren't - may want to consider removing them from the repo.

Thanks