Adding a New Feature

Features are how Nodewood organizes similar code. Have you ever worked on a project that had a single "controllers" folder with several dozen files, mostly unrelated, and figuring out what you needed to work on required scrolling and hunting for the correct file? Multiply that dozens of times across your average workday and against all the other kinds of files with their own mega-folders (models, views, tests, etc.), and you end up with a lot of wasted time and focus.

Instead, Nodewood encourages you to separate your files into related feature folders. These feature folders duplicate the main folder structure of app and wood, providing you with separate api, ui, and lib folders, for your back-end, front-end, and common files, respectively. Now, when working on that feature, you don't have to hunt around a bunch of unrelated files, and you can retain your focus for thinking about things that actually matter in the moment.

What makes a good feature?

When starting your app, it can help to create a "base feature" to contain the code that defines your app. If you're working on a todo list, you could create a "todos" feature, or if you were working on a customer service app, you could create a "customers" feature. Later, when planning on adding a new feature to your app that is logically-different from your base feature (adding maps to todo lists, or projects that your customers are working on), it can really simplify the organization of your app to make that new feature a separate Nodewood feature with its own folder.

Step-by-step: Adding a new feature

To add a new feature, follow these simple steps.

1. Open a terminal window and change directory to the root of your project.
2. Ensure your Nodewood CLI is up-to-date with yarn global add @nodewood/cli.
3. Ensure your local Nodewood install is up-to-date with nodewood up. Make sure to commit changes if you do update.
4. Assuming you're creating a "todo" feature, run nodewood add:feature todos.
5. Ensure that the features.app array in app/config/app.js contains a todos entry to enable the feature.
6. To add the feature's base page to the sidebar, modify the appSidebar array in app/config/ui.js and add an entry with the path /todos. The name can be anything you like, and the icon can be anything from FontAwesome's Free Gallery (opens new window) (or paid, if you have added that to your app).

This command will generate a migration in app/migrations. For now, it just contains an auto-incrementing ID, standard timestamps ("updated at" and "created at"), and a "name" field. To run this migration, run nodewood migrate. This will ensure the table exists for the sample code installed for your new feature. Later, when you modify the fields in this migration to match your model, make sure to run nodewood rollback first to roll back this database change, then nodewood migrate to apply your new changes.

To explore your new feature, start your app with nodewood dev and visit https://localhost/app/todos once it is running. By default, Nodewood will install sample code alongside your new feature that allows you to view a paginated list of todos, create a todo, edit it, and delete it. Of course, your feature will require more-advance or completely different code, but this example code gives you a basis to work from that demonstrates many of Nodewood's built-in features to reference from.

To view that code, navigate to app/features/todos, which will contain three folders:

• The api folder will contain example controllers, tests for those controllers, and services that power the actions of those controllers.
• The lib folder will contain example models and validators that can be used on both the front-end and back-end.
• The ui folder will contain the pages that users can navigate to as well as Vuex stores for accessing data from your API backend. Routing for these pages is defined in the ui/init.js file.

This is a good place to begin exploring the sample code from and getting an understanding of how Nodewood simplifies development. For a more guided tour, consider reading the Architecture Concepts section of the documentation.