# 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
wood, providing you with separate
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.
- Open a terminal window and change directory to the root of your project.
- Ensure your Nodewood CLI is up-to-date with
yarn add global @nodewood/cli.
- Ensure your local Nodewood install is up-to-date with
nodewood up. Make sure to commit changes if you do update.
- Assuming you're creating a "todo" feature, run
nodewood add:feature todos.
- Ensure that the
todosentry to enable the feature.
- To add the feature's base page to the sidebar, modify the
app/config/ui.jsand 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:
apifolder will contain example controllers, tests for those controllers, and services that power the actions of those controllers.
libfolder will contain example models and validators that can be used on both the front-end and back-end.
uifolder 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
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.