Tutorial - Next.js, Storybook, and Lerna: Build a Monorepo Structure

栏目: IT技术 · 发布时间: 4年前

内容简介:We can bootstrap our Lerna project by globally installing it:

In this article, we’ll learn about how to build a monorepo using Lerna . We’ll be building a Next.js application which will import components from a separate package. We’ll also be using Storybook to showcase those components.

What is Lerna?

Lerna is a tool for managing projects which contain multiple JavaScript projects. It’s similar to yarn workspace as it helps us manage a monorepo while making it easy to build all the packages separately.

Get Started Building with Next.js, Storybook, and Lerna

We can bootstrap our Lerna project by globally installing it:

npm install --global lerna

Next, we need to create a new git repository:

git init building-monorepos-using-lerna && cd building-monorepos-using-lerna

Now, we can run the init command which will create a new Lerna repo or upgrade an existing repo to the current version of Lerna:

lerna init

Tutorial - Next.js, Storybook, and Lerna: Build a Monorepo Structure

This will generate the following structure:

Tutorial - Next.js, Storybook, and Lerna: Build a Monorepo Structure

Creating the Front-end Package

We’ll be creating the front-end package inside the packages directory. So, let’s change our directory and install the Next.js application:

cd packages && yarn create next-app

This will generate the following structure:

Tutorial - Next.js, Storybook, and Lerna: Build a Monorepo Structure

Please note that while creating the Next.js application, I chose the name front-end . Hence, all the files were installed inside that directory. If you choose a different name for your Next.js application, you’ll see that directory instead.

Creating the Components Package

We’ll be creating the components package inside the packages directory. In this package, we’ll be building React components which will be consumed by our Next.js application ( front-end package).

We’ll also use Microbundle for bundling our modules. Let’s create the package using Lerna:

lerna create components

Tutorial - Next.js, Storybook, and Lerna: Build a Monorepo Structure

Now, the structure of our application should be like the following:

Tutorial - Next.js, Storybook, and Lerna: Build a Monorepo Structure

Let’s add microbundle to our components package:

cd packages/components && yarn add microbundle -D

The above command will add microbundle as a dev-dependency.

Learn how your Marketing team can update your Next.js app with ButterCMS.

Let’s add one script inside our components package’s package.json file:

// packages/components/package.json

"scripts": {
   ..
   "dev": "microbundle watch --jsx React.createElement"
 }

Also, we need to add a source to the package.json file:

// packages/components/package.json

"source": "lib/index.js",

Let’s create one file called index.js inside our packages/components/lib directory.

Running Our Packages

Until now, we’ve created two packages: front-end and components . Both of them have a dev script defined in their respective package.json files:

// packages/components/package.json

"scripts": {
   ..
   "dev": "microbundle watch --jsx React.createElement lib/*.js"
 },
// packages/front-end/package.json

"scripts": {
   ..
   "dev": "next dev",
 },

We can run both these scripts from the root using the following command:

lerna run dev

Tutorial - Next.js, Storybook, and Lerna: Build a Monorepo Structure

We can now view our Next.js application running on http://localhost:3000/ .

Tutorial - Next.js, Storybook, and Lerna: Build a Monorepo Structure

More information regarding lerna run command is available here .

We can also run the following command to get the logs about our server:

lerna run dev --parallel

Tutorial - Next.js, Storybook, and Lerna: Build a Monorepo Structure

If we want to run a command for only one package we use the following command:

lerna run dev --scope front-end

Tutorial - Next.js, Storybook, and Lerna: Build a Monorepo Structure

Connecting Our Front-end Package with Our Components Package

Let’s now connect our front-end package with our components package. To do that, we can simply add the components package in the front-end package’s package.json file:

// packages/front-end/package.json

"dependencies": {
   ..
   "components": "0.0.0"
 }

We’ve defined the version 0.0.0 as that’s the version defined in the components package’s package.json file:

// packages/components/package.json

{
 "name": "components",
 "version": "0.0.0",
 ..
}

Let’s import a dummy function from the components package into our front-end application:

// packages/front-end/pages/index.js

import Head from "next/head";
import dummy from "components";

dummy(); // function log something from components package

const Home = () => (
  ..
)

Let’s update our component package’s lib/index.js file to ensure that the dummy function that we imported from it is working fine:

// packages/components/lib/index.js

"use strict";

module.exports = components;

function components() {
 console.log("Front components package!");
}

We can immediately see that our packages compiled:

Tutorial - Next.js, Storybook, and Lerna: Build a Monorepo Structure

Now, if we visit http://localhost:3000/ , we should be able to see the console.log output on the browser’s console:

Tutorial - Next.js, Storybook, and Lerna: Build a Monorepo Structure

So, we’ve successfully connected our Next.js application with our components package. Next, we’ll build a few React components using Storybook. Then, we’ll import them in our Next.js application.

Integrating Storybook With Our Components Package

We’ll now install Storybook and build our React components with it.

cd packages/components && npx -p @storybook/cli sb init --type react

The above command will do the following:

  1. Adds the Storybook dependencies
  2. Generates example stories
  3. Adds two storybook scripts
"scripts": {
   ..
   "storybook": "start-storybook -p 6006",
   "build-storybook": "build-storybook"
 },

Our application structure will now look like the following:

Tutorial - Next.js, Storybook, and Lerna: Build a Monorepo Structure

Now, we’ll create a Button component and import it in our Storybook application. Let’s create a simple Button component in our components package:

// packages/components/lib/button/index.js

import React from "react";

const Button = ({ onClick, children }) => {
 return <button onClick={onClick}>{children}</button>;
};

export default Button;

Now, we can import this in our Button story. We already have an example Button story. We just need to replace the Button component present in that story with our Button component:

// packages/components/stories/1-Button.stories.js

import React from "react";
import { action } from "@storybook/addon-actions";

import Button from "../lib/button";

export default {
 title: "Button",
 component: Button
};

export const Text = () => (
 <Button onClick={action("clicked")}>Hello Button</Button>
);

export const Emoji = () => (
 <Button onClick={action("clicked")}>
   <span role="img" aria-label="so cool">
     :grinning: :sunglasses: :+1: :100:
   </span>
 </Button>
);

We can now run our Storybook application and check our Button component:

cd packages/components && yarn storybook

Tutorial - Next.js, Storybook, and Lerna: Build a Monorepo Structure

Our Storybook application will now be up and running at http://localhost:6006/ . We can also view our Button component there:

Tutorial - Next.js, Storybook, and Lerna: Build a Monorepo Structure

Learn how your Marketing team can update your Next.js app with ButterCMS.

Importing Button From Our Components Package

Until now, we have created a Button component in our components package. Let’s export that component from our package:

// packages/components/lib/index.js

"use strict";

import Button from "./button";

module.exports = {
 Button
};

Now, we can import this component in our front-end package:

// packages/front-end/pages/index.js

import Head from "next/head";
import { Button } from "components";

const Home = () => (
 <div className="container">
     ..
     <Button 
       onClick={() => console.log("button clicked!")}
     >
       Click me
     </Button>
     ..
 </div>
);

export default Home;

Tutorial - Next.js, Storybook, and Lerna: Build a Monorepo Structure

We can see our Button component appearing below the Welcome to Next.js! text. If we click on the button, we can also see that it’s logging “button clicked!” in the browser’s console:

Tutorial - Next.js, Storybook, and Lerna: Build a Monorepo Structure

Adding Styles to Our Components

Let’s add styles to our Button component. We’ll be using emotion for styling. First, let’s install the necessary dependencies:

cd packages/components && yarn add @emotion/styled @emotion/core

Now, let’s update our Button component:

// packages/components/lib/button/index.js

import React from "react";
import styled from "@emotion/styled";

const Button = styled.button`
 padding: 12px 24px;
 background-color: #121a3e;
 font-size: 16px;
 border-radius: 4px;
 color: #fff;
 cursor: pointer;
`;

const _Button = ({ onClick, children }) => {
 return <Button onClick={onClick}>{children}</Button>;
};

export default _Button;

If we visit our Next.js application on http://localhost:3000/ , we can see the updated Button component:

Tutorial - Next.js, Storybook, and Lerna: Build a Monorepo Structure

Our Storybook application should also show the new Button component as well:

Tutorial - Next.js, Storybook, and Lerna: Build a Monorepo Structure

Conclusion

We’ve seen how easy it is to create an application with a design system using Lerna. The code for this project is available on Github . This repository can be the starting point for your next monorepo project.

I hope this tutorial helps you in your future projects. Please feel free to share your feedback in the comments section below.


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

自流量生活

自流量生活

斯科特·福克斯(Scott Fox) / 王晶晶 / 中信出版社 / 2018-8-1

一位远嫁他国的平凡女孩,陌生的环境、陌生的语言……她不得不从头学起。有写作爱好的她在网络上记录着她学习生活中的小故事。神奇的是,越来越多的人联系她,有人要付钱看新的故事,还有人想把这些故事拍成电视短片。她是怎么做到的? 这本书将告诉你如何利用互联网打造自己的“流量”生活,使你既能获取收入,又能以自己喜欢的方式过一生。在阅读这本书的过程中,你可能会找到自己喜欢的生活方式,了解成功打造自身“流量......一起来看看 《自流量生活》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

URL 编码/解码
URL 编码/解码

URL 编码/解码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具