{"id":3659,"date":"2021-04-21T16:00:16","date_gmt":"2021-04-21T16:00:16","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3659"},"modified":"2021-04-21T16:00:16","modified_gmt":"2021-04-21T16:00:16","slug":"ionic-and-lerna-and-rollup-oh-my","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my","title":{"rendered":"Ionic and Lerna and Rollup, oh my!"},"content":{"rendered":"

\n This is part one of a new series<\/a> on monorepos. By the end of the series, you’ll have the tools you need to adopt monorepo setups in your organization.\n<\/p><\/blockquote>\n

Building and maintaining multiple development projects comes with a unique set of problems teams need to solve. How do you share common bits of code between projects? How do you sync dependencies across projects? How do you optimize collaboration between projects?<\/p>\n

With solutions to those problems, it’s not shocking to see that monorepos are rapidly growing in popularity. In fact, we use monorepos here at Ionic! Several monorepo tools are available to development teams: Nx, Yarn workspaces, npm workspaces, Lerna, Turborepo…and I’m sure more that I’m not even aware of.<\/p>\n

In this blog post we’ll be building out a monorepo using Lerna<\/a>. I personally like how lightweight it is, and it works well with Ionic Framework React projects and Ionic Appflow.<\/p>\n

Our monorepo will consist of three packages (monorepo speak for subprojects); two Ionic Framework React applications, and a shared React library that will supply a React context each application will use.<\/p>\n

<\/p>\n

Initializing a Lerna Repository<\/h2>\n

Before we start generating Ionic Framework applications or building the shared code library, we need to initialize a Lerna repository. This space will hold all of our packages and is committed to source control as one repository.<\/p>\n

$ npm install -g lerna\n$ git init my-organization && cd my-organization\n$ lerna init\n<\/code><\/pre>\n
Crack open the generated lerna.json<\/code> file. By default, Lerna declares that all of your monorepos packages will be housed in the packages\/<\/code> folder. We can modify what folder(s) house our packages — let’s create a folder to house our Ionic Framework React applications, and another to house our shared React libraries.<\/p>\n
$ rmdir packages\n$ mkdir apps\n$ mkdir shared\n<\/code><\/pre>\n
Update lerna.json<\/code> so we can relay our monorepo’s structure to Lerna:<\/p>\n
{\n  "packages": ["apps\/*", "shared\/*"],\n  "version": "0.0.0"\n}\n<\/code><\/pre>\n
Before we add any packages to our monorepo, let’s make sure to use the Ionic CLI to establish a multi-app setup:<\/p>\n
$ ionic init --multi-app\n<\/code><\/pre>\n
Generating multiple Ionic Framework React applications<\/h2>\n
The initial plumbing of our monorepo is set up, now it’s time to create our Ionic Framework React applications. To ensure they are created in our apps\/<\/code> folder, we’re going to cd<\/code> into it then generate our apps.<\/p>\n
$ cd apps\/\n$ ionic start customers blank --type=react\n$ ionic start employees blank --type=react --no-deps\n<\/code><\/pre>\n
Remember that one challenge monorepos solve is the ability to manage dependencies across projects? We can use a technique known as “dependency hoisting” to have both packages point to the same folders containing the dependencies.<\/p>\n
$ cd ..\/\n$ lerna bootstrap --hoist\n<\/code><\/pre>\n
This process moved dependencies shared across packages into a node_modules<\/code> folder at the root of the repository. Lerna creates symlinks for the packages to reference when a shared dependency is required.<\/p>\n
Lerna doesn’t initialize a .gitignore<\/code> at the root of the repository. It’s not a good idea to commit all the hoisted dependencies, so let’s create one to exclude our dependencies from being committed to source control.<\/p>\n
$ echo "node_modules" > .gitignore\n<\/code><\/pre>\n
\n  Note:<\/strong> To run a package’s npm commands using the Lerna CLI, the command is lerna run <script> --scope=<package><\/code>. As an example, to serve the Employees app run lerna run start --scope=employees<\/code>.\n<\/p><\/blockquote>\n
Creating a shared code library<\/h2>\n
Tools like Storybook and Bit are out there that provide CLIs that generate React libraries intended to be shared. They might be great tools for you to add to your development toolbox, but I find them to have too much overhead. For the purpose of this blog post, we’ll use Rollup<\/a> to build our own.<\/p>\n
Structuring the package<\/h3>\n
Lerna allows us to create generic JavaScript projects through it’s CLI. Let’s add a package and structure it such that it can be used as a reusable React library.<\/p>\n
$ lerna create @myorg\/core shared --description="Core shared library" --es-module --access=restricted --yes\n<\/code><\/pre>\n
Let’s add Rollup to the package and make some modifications to the package structure.<\/p>\n
$ cd shared\/core\n$ npm install --save-dev rollup rollup-plugin-typescript2\n$ echo "dist" >> .gitignore\n$ rm -rf __tests__ README.md\n$ mv src\/core.js src\/index.ts\n$ touch rollup.config.js tsconfig.json\n$ cd ..\/..\/\n<\/code><\/pre>\n
Next, populate shared\/code\/rollup.config.js<\/code> with the following code:<\/p>\n
import typescript from 'rollup-plugin-typescript2';\nimport pkg from '.\/package.json';\n\nconst input = "src\/index.ts";\n\nconst external = [\n  ...Object.keys(pkg.dependencies || {}),\n  ...Object.keys(pkg.peerDependencies || {}),\n];\n\nconst plugins = [ typescript({ typescript: require("typescript") }) ];\n\nexport default [\n  {\n    input,\n    output: { file: pkg.module, format: "esm", sourcemap: true },\n    plugins,\n    external\n  },\n  {\n    input,\n    output: { file: pkg.main, format: "cjs", sourcemap: true },\n    plugins,\n    external\n  },\n];\n<\/code><\/pre>\n
Then populate shared\/core\/tsconfig.json<\/code> with the following code:<\/p>\n
{\n  "compilerOptions": {\n    "allowSyntheticDefaultImports": true,\n    "allowUnreachableCode": false,\n    "declaration": true,\n    "esModuleInterop": true,\n    "forceConsistentCasingInFileNames": true,\n    "importHelpers": true,\n    "lib": ["es2015", "dom"],\n    "module": "es2015",\n    "moduleResolution": "node",\n    "noEmitHelpers": true,\n    "noFallthroughCasesInSwitch": true,\n    "noUnusedLocals": false,\n    "noUnusedParameters": true,\n    "skipLibCheck": true,\n    "strict": true,\n    "target": "es2017",\n    "sourceMap": true,\n    "inlineSources": true,\n    "jsx": "react"\n  },\n  "include": ["src\/**\/*"],\n  "exclude": ["src\/**\/**.test.*"]\n}\n<\/code><\/pre>\n
Finally, we need to make some modifications to shared\/core\/package.json<\/code>.<\/p>\n
    \n
  1. Add a new section named peerDependencies<\/code>. Copy over the dependencies<\/code> array from one of the apps and paste it in this section.<\/li>\n
  2. Add the array of peerDependencies<\/code> to the array of devDependencies<\/code>.<\/li>\n
  3. Remove the files<\/code> section.<\/li>\n
  4. In the directories<\/code> section, change the lib<\/code> value to src<\/code> and remove the test<\/code> entry.<\/li>\n
  5. Update the main<\/code> property to dist\/index.js<\/code> and module<\/code> to dist\/index.esm.js<\/code>.<\/li>\n
  6. Replace the contents of the scripts<\/code> section with the following scripts:<\/li>\n<\/ol>\n
    "build": "npx rollup -c",\n"watch": "npx rollup -c -w"\n<\/code><\/pre>\n
    \n  Note:<\/strong> Not all peerDependencies<\/code> or devDependencies<\/code> are needed. You can prune any that aren’t being used in the package’s source code.\n<\/p><\/blockquote>\n
    Now we can add our shared package to our applications.<\/p>\n
    $ lerna run build --scope=@myorg\/core\n$ lerna bootstrap --hoist\n$ lerna add @myorg\/core\n<\/code><\/pre>\n
    When adding a shared package to application packages in a monorepo, use the scoped npm package naming approach (such as @myorg\/core<\/code>). Not only does it remove the need to do any kind of path-mapping, it’s also super cool!<\/p>\n
    Building a theme context<\/h3>\n
    Technically<\/em> we can demo the shared library in our application packages by importing the core()<\/code> function defined in @myorg\/core<\/code> but that’s pretty lame. Instead, let’s build a React Context that provides the plumbing needed to allow users to toggle light\/dark mode on the applications.<\/p>\n
    $ echo "export * from '.\/theme\/ThemeContext';" > shared\/core\/src\/index.ts\n$ mkdir shared\/core\/src\/theme\n$ touch shared\/core\/src\/theme\/ThemeContext.tsx\n<\/code><\/pre>\n
    Populate shared\/core\/src\/theme\/ThemeContext.tsx<\/code> with the following code:<\/p>\n
    import React, { createContext, useContext, useEffect, useState } from "react";\n\nconst initialContext = {\n  isDarkMode: false,\n  toggleDarkMode: (_: boolean) => {},\n};\n\nconst ThemeContext = createContext(initialContext);\nexport const useTheme = () => useContext(ThemeContext);\n\nexport const ThemeProvider: React.FC = ({ children }) => {\n  const [isDarkMode, setDarkMode] = useState<boolean>(false);\n\n  useEffect(() => {\n    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");\n    prefersDark.addEventListener("change", (e) => setDarkMode(e.matches));\n    toggleDarkMode(prefersDark.matches);\n  }, []);\n\n  const toggleDarkMode = (useDarkMode: boolean) => {\n    document.body.classList.toggle("dark", useDarkMode);\n    setDarkMode(useDarkMode);\n  };\n\n  return (\n    <ThemeContext.Provider value={{ isDarkMode, toggleDarkMode }}>\n      {children}\n    <\/ThemeContext.Provider>\n  );\n};\n<\/code><\/pre>\n
    Rebuild the @myorg\/core<\/code> package so the applications can have access to <ThemeProvider \/><\/code> and useTheme()<\/code>.<\/p>\n
    $ lerna run build --scope=@myorg\/core\n<\/code><\/pre>\n
    \n  Note:<\/strong> While developing shared libraries, it’s beneficial to run lerna run watch --scope=<package><\/code> to rebuild the library in real-time.\n<\/p><\/blockquote>\n
    Putting it all together<\/h3>\n
    Let’s update our application packages to see our theme context in action. The following actions should be performed in both the customers<\/code> and employees<\/code> packages:<\/p>\n
      \n
    1. Remove the @media (prefers-color-scheme: dark)<\/code> media query in variables.css<\/code>.<\/li>\n
    2. In variables.css<\/code>, append .dark<\/code> to any body<\/code> selector; body<\/code> becomes body.dark<\/code>, .ios body<\/code> becomes .ios body.dark<\/code>, and .md body<\/code> becomes .md body.dark<\/code>.<\/li>\n
    3. In App.tsx<\/code> add the following import: import { ThemeProvider } from '@myorg\/core';<\/code><\/li>\n
    4. In App.tsx<\/code>, wrap the <IonApp><\/code> component and it’s children with <ThemeProvider><\/code>, so <ThemeProvider><\/code> is the outermost component of the App<\/code> template.<\/li>\n<\/ol>\n
      Serve one of the applications (lerna run start --scope=<package><\/code>), change your dark mode preference, and refresh the browser to test it out!<\/p>\n
      Integrating with Appflow<\/h2>\n
      Appflow<\/a> is Ionic’s mobile CI\/CD platform that makes it easy to build, publish, and update your apps over time. Oh, and it also supports monorepos!<\/p>\n
      To support a monorepo structure, Appflow needs a singular appflow.config.json<\/code> file at the root of the monorepo repository.<\/p>\n
      $ touch appflow.config.json\n<\/code><\/pre>\n
      Populate the file with the following:<\/p>\n
      {\n  "apps": [\n    {\n      "appId": "XXXXXXXX",\n      "root": "apps\/customers",\n      "dependencyInstallCommand": "cd ..\/..\/ && npx lerna bootstrap && npx lerna run build --scope=@myorg\/core"\n\n    },\n    {\n      "appId": "XXXXXXX",\n      "root": "apps\/employees",\n      "dependencyInstallCommand": "cd ..\/..\/ && npx lerna bootstrap && npx lerna run build --scope=@myorg\/core"\n\n    }\n  ]\n}\n<\/code><\/pre>\n
      Replace the appId<\/code> values with the ones provided to you from Appflow, of course. The important bit here is that as part of the dependency install command we build the shared packages after bootstrapping Lerna. In a real-world scenario you’d probably want to create a custom shell script to encapsulate the commands used above — especially as the amount of shared libraries in your monorepo scale.<\/p>\n
      Wrapping up<\/h2>\n
      We now have a monorepo built with Lerna that contains two Ionic Framework React applications and a shared React library, hooked up to Appflow for continuous integration and continuous deployment!<\/p>\n
      Our monorepo solves several problems encountered when maintaining multiple projects: it shares common code between projects, manages dependencies across projects, and eases collaboration effort between projects.<\/p>\n
      With a solid foundation in place you can continue scaling your monorepo to fit you and your development team’s needs.<\/p>\n
      Sample Project<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
      This is part one of a new series on monorepos. By the end of the series, you’ll have the tools you need to adopt monorepo setups in your organization. Building and maintaining multiple development projects comes with a unique set of problems teams need to solve. How do you share common bits of code between […]<\/p>\n","protected":false},"author":76,"featured_media":3660,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"1","publish_post_category":"28","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"503551","discourse_permalink":"https:\/\/forum.ionicframework.com\/t\/ionic-and-lerna-and-rollup-oh-my\/208490","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[121,124],"tags":[128,208,206,136],"class_list":["post-3659","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering","category-tutorials","tag-appflow","tag-lerna","tag-monorepos","tag-react"],"acf":[],"yoast_head":"\nIonic and Lerna and Rollup, oh my! - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ionic and Lerna and Rollup, oh my!\" \/>\n<meta property=\"og:description\" content=\"This is part one of a new series on monorepos. By the end of the series, you’ll have the tools you need to adopt monorepo setups in your organization. Building and maintaining multiple development projects comes with a unique set of problems teams need to solve. How do you share common bits of code between […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-21T16:00:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/04\/lerna-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"880\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Eric Horodyski\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eric Horodyski\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my\"},\"author\":{\"name\":\"Eric Horodyski\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/bec836be266e0046c56c120cdb9806d6\"},\"headline\":\"Ionic and Lerna and Rollup, oh my!\",\"datePublished\":\"2021-04-21T16:00:16+00:00\",\"dateModified\":\"2021-04-21T16:00:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my\"},\"wordCount\":1110,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/04\/lerna-feature-image.png\",\"keywords\":[\"Appflow\",\"Lerna\",\"Monorepos\",\"react\"],\"articleSection\":[\"Engineering\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my\",\"url\":\"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my\",\"name\":\"Ionic and Lerna and Rollup, oh my! - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/04\/lerna-feature-image.png\",\"datePublished\":\"2021-04-21T16:00:16+00:00\",\"dateModified\":\"2021-04-21T16:00:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/04\/lerna-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/04\/lerna-feature-image.png\",\"width\":1600,\"height\":880},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ionic and Lerna and Rollup, oh my!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/bec836be266e0046c56c120cdb9806d6\",\"name\":\"Eric Horodyski\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/07\/T024WJZKU-U010BLA2B9S-89f661f3bfad-512-150x150.jpeg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/07\/T024WJZKU-U010BLA2B9S-89f661f3bfad-512-150x150.jpeg\",\"caption\":\"Eric Horodyski\"},\"url\":\"https:\/\/ionic.io\/blog\/author\/horodyski\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ionic and Lerna and Rollup, oh my! - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my","og_locale":"en_US","og_type":"article","og_title":"Ionic and Lerna and Rollup, oh my!","og_description":"This is part one of a new series on monorepos. By the end of the series, you’ll have the tools you need to adopt monorepo setups in your organization. Building and maintaining multiple development projects comes with a unique set of problems teams need to solve. How do you share common bits of code between […]","og_url":"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my","og_site_name":"Ionic Blog","article_published_time":"2021-04-21T16:00:16+00:00","og_image":[{"width":1600,"height":880,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/04\/lerna-feature-image.png","type":"image\/png"}],"author":"Eric Horodyski","twitter_card":"summary_large_image","twitter_creator":"@ionicframework","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Eric Horodyski","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my"},"author":{"name":"Eric Horodyski","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/bec836be266e0046c56c120cdb9806d6"},"headline":"Ionic and Lerna and Rollup, oh my!","datePublished":"2021-04-21T16:00:16+00:00","dateModified":"2021-04-21T16:00:16+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my"},"wordCount":1110,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/04\/lerna-feature-image.png","keywords":["Appflow","Lerna","Monorepos","react"],"articleSection":["Engineering","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my","url":"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my","name":"Ionic and Lerna and Rollup, oh my! - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/04\/lerna-feature-image.png","datePublished":"2021-04-21T16:00:16+00:00","dateModified":"2021-04-21T16:00:16+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/04\/lerna-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/04\/lerna-feature-image.png","width":1600,"height":880},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/ionic-and-lerna-and-rollup-oh-my#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Ionic and Lerna and Rollup, oh my!"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/bec836be266e0046c56c120cdb9806d6","name":"Eric Horodyski","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/07\/T024WJZKU-U010BLA2B9S-89f661f3bfad-512-150x150.jpeg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/07\/T024WJZKU-U010BLA2B9S-89f661f3bfad-512-150x150.jpeg","caption":"Eric Horodyski"},"url":"https:\/\/ionic.io\/blog\/author\/horodyski"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/04\/lerna-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/76"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=3659"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3659\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/3660"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=3659"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=3659"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=3659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}