Internal Tutorials

NX

Nx is a build system with tooling to help manage monorepos. We will mainly be using it to generate files for us.

Caution

Ensure all nx commands are executed within the root of the project.

Heres how we can generate a new component with the name navbar in the shared/budgie-components folder

nx g @nx/next:component navbar --project=shared-budgie-components
# Nx uses "-" instead of forward slashes when specifying project locations

#we can also generate pages for our next app with:
nx g @nx/next:page my-new-page --directory=dir-where-to-place-the-page

Choosing CSS as our styling option and derived path will generate the following files:

Nx also generates a suite of commands we can use to start our app in development mode, run tests, build our code and much more. The commands can be accessed within the Nx Extension in VisualStudio Code. For more on Nx and specific commands see the docs here.

Eg. Starting development server

nx run budgie-app:dev
# general format is nx run <Project>:task 

Storybook

Storybook is a frontend toll that will help us build UI elements in isolation.

For each component you must create a file named

<component_name>.stories.js

import { NavBar } from './NavBar';

export default {
  component: navbar,
   parameters: {
        layout: 'fullscreen'
   }
};

export const DefaultNavBar = {
    render: () => <NavBar />, // this function specifies how to render a variant
};

This file makes storybook aware of our component and how we want to render it. We can then start the storybook server through the Nx extension or run:

nx run shared-budgie-components:storybook

For more on Storybook see the docs here