Inferno + Mobx Starter project

 

 

The goal of this project is to provide a starting base for an mobx inferno project with isomorphism.

Features:

• async/await support
• Isomorphic for SEO goodness
• CSS and SCSS compilation
• MongoDB user register/login/logout
• Token based authentication
• Decorators for accessing actions and state
• Hot reload (browser only)
• Bundle size as small as possible

How to run

For development:

npm run dev

For production:

npm run prod

Requirements

Node 6 or Node 4 with additional babel plugins
MongoDB server

Goals

We have one state object. That object can be accessed by any Inferno component decorated with @connect.

If we want to update the state, we execute actions which are just namespaced functions (namespace = action filename) that affect the state.

All the rendering is efficiently taken care by MobX so you can focus on two things:

What to name your action? and what should it do?

F.A.Q.

How to add mongoose models ?

---

1. Goto src/server/models
2. Add [Name].js
3. Goto src/helpers/database
4. Add a new key to the export default and require your model there.

How to add a new action

---

Goto src/client/actions.

If you want to add a new action to an existing file, just add a new method to one of the classes ex: add clearAll() method to todos.js

If you want to add a new set of actions, create a new file ex: settings.js and add a reference to that file to const actions in index.js

My components are not updating!

---

Make sure you added the @connect decorator to your component.

My stateless component doesn't have access to this.context !

---

You cannot use decorators on stateless components. You should instead wrap your component like this:

const MyStatelessComponent = connect(function(props, context) {
  return <p>{context.state.something} !</p>
})

Should I use @observer on all components ?

---

@connect only enhances the component you are decorating, not the components used inside it. So usually all your components should be decorated. Don't worry, this is not inefficient, in contrast, more observer components make rendering more efficient.

How do I execute async actions on the server and/or client ?

---

Checkout src/client/components/Todos.js. The fetchData method is smart, it will be executed either on the server or on the browser depending on how you access the website.

Usefull links

---

Inferno

MobX

mobx-connect

Author

Ryan Megidov

https://github.com/nightwolfz/inferno-starter