Nodewood
Build with Nodewood

# UI / Frontend

The Nodewood UI is a Vue application that uses vue-router (opens new window) and Vuex (opens new window) for routing and state management, respectively. It is built using Webpack.

To build and watch the Nodewood UI in development mode, connect to the Nodewood development VM (nodewood vm from the root of your project folder), then cd code to switch to the shared code folder, and nodewood dev ui to build and begin watching the UI. The default webpack configuration places the built files in app/ui/dist, and the Nodewood API Express server serves any request from /app to there. This means that you must also have the Nodewood API Express server running to test any UI changes.

# Configuration

The following files are located in wood/config, but can be overridden by creating identically-named entries in app/config. The options below are not exhaustive, but cover the options in these files that apply to the UI.

# admin.js

This file contains configuration details for the admin panel.

  • userListFields: These are the fields displayed in the list of users on the Users page.
  • teamListFields: These are the fields displayed in the list of teams on the Teams page, provided you have enabled the Teams feature.

# app.js

This file contains general configuration details for your app.

  • name: This is the name that is used by default for the title of your pages.
  • features: This is the list of enabled features. Features appearing in this list and located in the app/features folder will be examined for Pages with routes and Stores and automatically add them to the application bundle. Note that this is split into app features (ones that you create) and wood features (once that come bundled with Nodewood). This allows you to disable Nodewood features should you need or want to.
  • defaultErrorMessage: This is the default error message displayed in situations where a more-specific error message has not been provided.

# ui.js

  • templateComponents: This is an array of components that can be used as the custom outer template component, in case you need more configuration than the built-in AppTemplate, AdminTemplate, and MinimalTemplate provide.
  • appMenuEntries: This array allows you to configure the links in the SideBar (desktop mode) and TopBar (mobile mode) components in the default App Template.
  • adminMenuEntries: This array allows you to configure the links in the SideBar (desktop mode) and TopBar (mobile mode) in the default Admin Template.
  • userMenuEntries: This array allows you to configure the links in the user dropdown (desktop mode) or secondary navigation in the TopBar (mobile mode) in the default App and Admin templates.

# Analyzing bundle size

Nodewood ships with the Webpack Bundle Analyzer installed, so you can review your bundle size and make educated choices to keep your JavaScript bundle size low. To view it, visit http://localhost:8888 (opens new window) when your development environment is running.

← Pages & UI Routing →