{"id":4147,"date":"2022-03-31T16:14:47","date_gmt":"2022-03-31T16:14:47","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=4147"},"modified":"2023-01-21T00:30:27","modified_gmt":"2023-01-21T05:30:27","slug":"building-react-and-angular-component-libraries-with-stencil-and-nx","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx","title":{"rendered":"Building React and Angular Component Libraries with Stencil and Nx"},"content":{"rendered":"<p>One of the greatest advantages of using Stencil to build a design system is that Stencil components are compatible with multiple different frontend frameworks. This means that you can write one core component library with Stencil and generate multiple component libraries for different frameworks based on that core. These components can then be consumed by a variety of apps using a variety of frameworks.<\/p>\n<p><!--more--><\/p>\n<p>With all these different component libraries and applications depending on each other, you\u2019ll want a way to organize your packages and streamline your development workflow. For this kind of setup, organizing your packages under a monorepo can be incredibly helpful. A monorepo is a single repository that contains all of the code\/packages for your project. <a href=\"https:\/\/nx.dev\/\">Nx<\/a> is a powerful build system for building monorepos.<\/p>\n<p>In this tutorial, we\u2019ll use Nx to create a monorepo that includes <a href=\"https:\/\/reactjs.org\/\">React<\/a> and <a href=\"https:\/\/angular.io\/\">Angular<\/a> component libraries derived from a single Stencil project. We\u2019ll also create React and Angular applications that consume these components, and we\u2019ll see how all of these packages work together under one monorepo.<\/p>\n<p>You can find all of the code for this tutorial in the <a href=\"https:\/\/github.com\/a-giuliano\/nx-stencil\">nx-stencil github repo<\/a>. If you prefer to watch a video tutorial, I recently created a video where I walk through this entire process. Check it out!<\/p>\n<div class=\"video-container\">\n              <iframe data-src=\"https:\/\/www.youtube.com\/embed\/p9NaM4_CdmQ\"frameborder=\"0\" allowfullscreen src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n            <\/div>\n<h2>Create an Nx Workspace<\/h2>\n<p>The first thing we need to do to get started with a monorepo is create an Nx workspace. We can do that by running<\/p>\n<pre><code class=\"language-bash\">npx create-nx-workspace@latest\n<\/code><\/pre>\n<p>After running this command, you\u2019ll be prompted for a workspace name. I\u2019m going to call mine \u201cnx-stencil\u201d for this tutorial. After you name your workspace, you\u2019ll be prompted to choose what you want to create in the workspace. I\u2019m going to choose \u201ccore\u201d for the most basic setup. Finally, you\u2019ll be asked if you want to use Nx Cloud, which we won\u2019t need for this tutorial.<\/p>\n<blockquote><p>\n  NOTE: Many of the commands in this tutorial will involve using the Nx CLI. You may want to install the Nx CLI globally ahead of time by running <code>npm install -g nx<\/code>.<\/p><\/blockquote>\n<h2>Adding a Stencil Project<\/h2>\n<p>With our Nx workspace set up, we can now add a Stencil project to our workspace. First, we\u2019ll add the Stencil Nx plugin as a dev dependency by running<\/p>\n<pre><code class=\"language-bash\">npm install @nxext\/stencil --save-dev\n<\/code><\/pre>\n<p>The Nx Stencil plugin provides a lot of commands that simplify some of the most common aspects of building a monorepo around a Stencil project. With the plugin installed, we can create our stencil project by running<\/p>\n<pre><code class=\"language-bash\">nx g @nxext\/stencil:lib core-components --buildable\n<\/code><\/pre>\n<blockquote><p>\n  NOTE: You may receive an error indicating that you have to install @nrwl\/cypress first. You can do that by running <code>npm install @nrwl\/cypress --save-dev<\/code>.<\/p><\/blockquote>\n<p>When you run this command, you\u2019ll be prompted to pick a stylesheet format. After that, the plugin will create our stencil project, <code>core-components<\/code>, in the <code>packages<\/code> directory. This will be a standard Stencil project with a <code>my-component<\/code> component already created. We\u2019ll be using this component to demonstrate how to use a Stencil component in both a React and Angular app.<\/p>\n<h2>Creating a React Component Library<\/h2>\n<p>One of the major advantages of Stencil is that we can wrap our Stencil components to work seamlessly with different frontend frameworks. Better yet, the Nx Stencil plugin comes with a command to simplify this process. To create a library of React components from our Stencil components, we can run the following command:<\/p>\n<pre><code class=\"language-bash\">nx g @nxext\/stencil:add-outputtarget core-components --outputType=&#039;react&#039;\n<\/code><\/pre>\n<blockquote><p>\n  NOTE: You may receive an error indicating that you have to install additional packages such as @nxext\/svelte, @angular-devkit\/schematics, and @nrwl\/react first. You can do that by running <code>npm install @nxext\/svelte @angular-devkit\/schematics @nrwl\/react --save-dev<\/code>.<\/p><\/blockquote>\n<p>Running this command does 2 important things:<\/p>\n<ol>\n<li>It creates a <code>core-components-react<\/code> directory. This is where our React components are going to live.<\/li>\n<li>It adds the <code>reactOutputTarget<\/code> to the stencil.config.ts file in our Stencil project. Let\u2019s have a look at it<\/li>\n<\/ol>\n<pre><code class=\"language-ts\">reactOutputTarget({\n      componentCorePackage: &#039;@nx-stencil\/core-components&#039;,\n      proxiesFile:\n        &#039;..\/..\/..\/packages\/core-components-react\/src\/generated\/components.ts&#039;,\n      includeDefineCustomElements: true,\n    }),\n<\/code><\/pre>\n<p>At a high level, adding the <code>reactOutputTarget<\/code> to our Stencil config file indicates that we want to generate React components when we build our Stencil project. We specify that we want to put those components in our <code>core-components-react<\/code> directory with the <code>proxiesFile<\/code> option. You can read more about creating React wrapper components on the <a href=\"https:\/\/stenciljs.com\/docs\/react\">React integration page of the Stencil docs<\/a>. Now, let\u2019s go ahead and build our Stencil project to generate our React components.<\/p>\n<pre><code class=\"language-bash\">nx build core-components\n<\/code><\/pre>\n<p>You will notice that running a build creates a <code>generated<\/code> folder in our React components library. This folder contains all of our React components and now they are ready to be used.<\/p>\n<h2>Using Our Components in a React App<\/h2>\n<p>Now that we have our React component library, we can start using those components in a React app. Let\u2019s first create a new React app by running<\/p>\n<pre><code class=\"language-bash\">nx generate @nrwl\/react:application\n<\/code><\/pre>\n<p>You\u2019ll be asked to provide a name and stylesheet format for your app, as well as whether or not you want to configure React router. I\u2019m just going to call my app \u201creact-app\u201d.<\/p>\n<p>Once the app is generated, we can go into the <code>app.tsx<\/code> file, remove the boilerplate code, and use our component.<\/p>\n<pre><code class=\"language-tsx\">import { MyComponent } from &#039;@nx-stencil\/core-components-react&#039;;\n\nexport function App() {\n  return (\n    &lt;&gt;\n      &lt;MyComponent first=&quot;First name&quot; last=&quot;Last name&quot; \/&gt;\n    &lt;\/&gt;\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n<p>To run our app, we can run<\/p>\n<pre><code class=\"language-bash\">nx serve react-app\n<\/code><\/pre>\n<blockquote><p>\n  NOTE: You may see an error indicating that members \u201cmust have an &#8216;override&#8217; modifier\u201d. You can resolve this by setting <code>noImplicitOverride<\/code> to <code>false<\/code> in the <code>tsconfig.json<\/code> file of the React app.<\/p><\/blockquote>\n<p>And we\u2019ll see our component on the page!<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-24-at-11.43.38-AM.png\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 604px; --smush-placeholder-aspect-ratio: 604\/172;\"><noscript><img decoding=\"async\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-24-at-11.43.38-AM.png\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 604px; --smush-placeholder-aspect-ratio: 604\/172;\"><noscript><img decoding=\"async\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-24-at-11.43.38-AM.png\"><\/noscript><\/noscript><\/p>\n<p>Now let\u2019s try doing the same thing for an Angular app.<\/p>\n<h2>Creating an Angular Component Library<\/h2>\n<p>The process of building an Angular component library from our Stencil components is very similar to the process we just went through, though there are some Angular-specific aspects we\u2019ll have to pay particular attention to. Let\u2019s start by creating our Angular component library with the Nx Stencil plugin.<\/p>\n<pre><code class=\"language-bash\">nx g @nxext\/stencil:add-outputtarget core-components --outputType=&#039;angular&#039;\n<\/code><\/pre>\n<blockquote><p>\n  NOTE: You may receive an error indicating that you have to install @nrwl\/angular first. You can do that by running <code>npm install @nrwl\/angular \u2013save-dev<\/code>.<\/p><\/blockquote>\n<p>Similar to the React command, this will create a <code>core-components-angular<\/code> directory to house our Angular components and it will also add the <code>angularOutputTarget<\/code> to our <code>stencil.config.ts<\/code> file.<\/p>\n<pre><code class=\"language-ts\">angularOutputTarget({\n      componentCorePackage: &#039;@nx-stencil\/core-components&#039;,\n      directivesProxyFile:\n        &#039;..\/..\/..\/packages\/core-components-angular\/src\/generated\/directives\/proxies.ts&#039;,\n      \/\/ we won\u2019t be using the \u2018valueAccessorConfigs\u2019, so feel free to remove this line\n      valueAccessorConfigs: angularValueAccessorBindings,\n    }),\n<\/code><\/pre>\n<p>With that in place, we can build our Stencil project to generate the Angular wrapped components.<\/p>\n<pre><code class=\"language-bash\">nx build core-components\n<\/code><\/pre>\n<p>Once we\u2019ve done that, and our Angular components have been generated, we need to declare and export our component from our module in <code>core-components-angular.module.ts<\/code> like so<\/p>\n<pre><code class=\"language-ts\">import { NgModule } from &#039;@angular\/core&#039;;\nimport { CommonModule } from &#039;@angular\/common&#039;;\nimport { MyComponent } from &#039;..\/generated\/directives\/proxies&#039;;\n\n@NgModule({\n imports: [CommonModule],\n declarations: [MyComponent],\n exports: [MyComponent]\n})\nexport class CoreComponentsAngularModule {}\n<\/code><\/pre>\n<h3>Using directivesArrayFile<\/h3>\n<p>Our configuration works just fine right now, but as we continue to add more components to our design system, we\u2019ll have to continue to maintain the imports in <code>core-components-angular.module.ts<\/code>. As you might imagine, this will become increasingly cumbersome when we start to have dozens or even hundreds of components. Luckily, there&#8217;s an additional config option called <code>directivesArrayFile<\/code> that helps us manage these imports. Here\u2019s how we can make use of it<\/p>\n<pre><code class=\"language-ts\">angularOutputTarget({\n      componentCorePackage: &#039;@nx-stencil\/core-components&#039;,\n      directivesProxyFile:\n      &#039;..\/..\/..\/packages\/core-components-angular\/src\/generated\/directives\/proxies.ts&#039;,\n      directivesArrayFile:\n      &#039;..\/..\/..\/packages\/core-components-angular\/src\/generated\/directives\/index.ts&#039;,\n      valueAccessorConfigs: angularValueAccessorBindings,\n    }),\n<\/code><\/pre>\n<p>With this config option, we now generate an <code>index.ts<\/code> file in the <code>directives<\/code> directory of our Angular component library. This file contains an array of all of our components. Now we can import this array in our Angular module, instead of each individual component.<\/p>\n<pre><code class=\"language-ts\">import { NgModule } from &#039;@angular\/core&#039;;\nimport { CommonModule } from &#039;@angular\/common&#039;;\nimport { DIRECTIVES } from &#039;..\/generated\/directives&#039;;\n\n\n@NgModule({\n  imports: [CommonModule],\n  declarations: [...DIRECTIVES],\n  exports: [...DIRECTIVES]\n })\n export class CoreComponentsAngularModule {}\n<\/code><\/pre>\n<p>With this approach, we\u2019ll never need to touch this module again, even as we add more components to our Stencil project and generate new wrappers.<\/p>\n<h2>Using Our Components in an Angular App<\/h2>\n<p>Now our component is ready to be consumed by an Angular app; so, let\u2019s create an Angular app to do exactly that. We can add an Angular app to our workspace by running<\/p>\n<pre><code class=\"language-bash\">nx generate @nrwl\/angular:application\n<\/code><\/pre>\n<p>Again, you\u2019ll have to specify an app name, stylesheet format, and whether or not you want to configure routing. I\u2019m going to call this app \u201cangular-app\u201d.<\/p>\n<p>In the <code>app.module.ts<\/code> file of our new Angular app, we can import that <code>CoreComponentsAngularModule<\/code> from our component library.<\/p>\n<pre><code class=\"language-ts\">import { CoreComponentsAngularModule } from &#039;@nx-stencil\/core-components-angular&#039;;\n<\/code><\/pre>\n<p>We\u2019ll also need to import and call the <code>defineCustomElements<\/code> function from our Stencil project at the top of this file. The <code>defineCustomElements<\/code> function registers all of our components so they can be used in our Angular app.<\/p>\n<pre><code class=\"language-ts\">import { defineCustomElements } from &#039;@nx-stencil\/core-components\/loader&#039;;\n\ndefineCustomElements()\n<\/code><\/pre>\n<p>Finally, we need to add our <code>CoreComponentsAngularModule<\/code> to our module imports so we can make use of our components in our app component template.<\/p>\n<pre><code class=\"language-ts\">@NgModule({\n declarations: [AppComponent, NxWelcomeComponent],\n imports: [BrowserModule, CoreComponentsAngularModule],\n providers: [],\n bootstrap: [AppComponent],\n})\nexport class AppModule {}\n<\/code><\/pre>\n<p>And with that, we can use our <code>my-component<\/code> component in our <code>app.component.html<\/code> file.<\/p>\n<pre><code class=\"language-html\">&lt;my-component first=&quot;First name&quot; last=&quot;Last name&quot;&gt;&lt;\/my-component&gt;\n<\/code><\/pre>\n<p>Let\u2019s run <code>nx serve angular-app<\/code> and see our component in action!<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-24-at-11.43.38-AM.png\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 604px; --smush-placeholder-aspect-ratio: 604\/172;\"><noscript><img decoding=\"async\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-24-at-11.43.38-AM.png\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 604px; --smush-placeholder-aspect-ratio: 604\/172;\"><noscript><img decoding=\"async\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-24-at-11.43.38-AM.png\"><\/noscript><\/noscript><\/p>\n<p>This is just one way you can create and connect your Angular components to an Angular app. For more details on how to wrap and use your Stencil components in an Angular app, checkout the <a href=\"https:\/\/stenciljs.com\/docs\/angular\">Stencil and Angular integrations docs<\/a>.<\/p>\n<h2>Update on Save<\/h2>\n<p>Having all of these packages work together in our monorepo is great, but there\u2019s one small improvement that we can make to improve the development experience. Right now, if we make a change to our Stencil component, the change is not reflected in our React or Angular app where the component is being used. This is because our applications are using the React and Angular wrapped versions of our component. If you recall, these wrapped components only update when we build our Stencil project. So to update our wrapped components, we can run<\/p>\n<pre><code class=\"language-bash\">nx build core-components --watch\n<\/code><\/pre>\n<p>We use the <code>--watch<\/code> flag here because now our Stencil project will watch for any changes, and rebuild when they occur. That means the wrapped component libraries (React and Angular) will be updated, and Nx can then detect that dependency change in the React and Angular apps and update them accordingly. Now, any change to our Stencil component will propagate all the way through to our applications.<\/p>\n<h2>Conclusion<\/h2>\n<p>All in all, monorepos can be a really useful way to organize a project and Nx is a great tool to help you achieve a streamlined monorepo workflow. This tutorial highlights a lot of the core features that you may use when setting up a design system to support multiple frameworks, but there are plenty more tools and plugins to take your monorepo to the next level. Nx has tons of <a href=\"https:\/\/nx.dev\/using-nx\/nx-devkit\">plugins<\/a> including a <a href=\"https:\/\/github.com\/storybookjs\/storybook\">plugin for Storybook<\/a>, so you can document and test the components of your design system. If you\u2019re interested in learning more about using Storybook in a Stencil project, checkout <a href=\"https:\/\/ionicframework.com\/blog\/how-to-use-storybook-with-stencil\/\">this guide on getting started with Stencil and Storybook<\/a>. As always, I hope you found this tutorial helpful. Until next time, happy coding \ud83d\ude0a.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the greatest advantages of using Stencil to build a design system is that Stencil components are compatible with multiple different frontend frameworks. This means that you can write one core component library with Stencil and generate multiple component libraries for different frameworks based on that core. These components can then be consumed by [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":4149,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"1","publish_post_category":"21","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"544759","discourse_permalink":"https:\/\/forum.ionicframework.com\/t\/building-react-and-angular-component-libraries-with-stencil-and-nx\/221948","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,223,124],"tags":[140,76,82],"class_list":["post-4147","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-stencil","category-tutorials","tag-design-systems","tag-stencil","tag-web-components"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Building React and Angular Component Libraries with Stencil and Nx - Ionic Blog<\/title>\n<meta name=\"description\" content=\"In this tutorial, we\u2019ll use Nx to create a monorepo that includes React and Angular component libraries derived from a Stencil project.\" \/>\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\/building-react-and-angular-component-libraries-with-stencil-and-nx\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building React and Angular Component Libraries with Stencil and Nx\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, we\u2019ll use Nx to create a monorepo that includes React and Angular component libraries derived from a Stencil project.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-31T16:14:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-21T05:30:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/stencilMR-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=\"Anthony Giuliano\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@a__giuliano\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anthony Giuliano\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx\"},\"author\":{\"name\":\"Anthony Giuliano\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/a3190e4d49187220d0c720f2ceab9b58\"},\"headline\":\"Building React and Angular Component Libraries with Stencil and Nx\",\"datePublished\":\"2022-03-31T16:14:47+00:00\",\"dateModified\":\"2023-01-21T05:30:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx\"},\"wordCount\":1673,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/stencilMR-feature-image.png\",\"keywords\":[\"Design Systems\",\"stencil\",\"web components\"],\"articleSection\":[\"All\",\"Stencil\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx\",\"url\":\"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx\",\"name\":\"Building React and Angular Component Libraries with Stencil and Nx - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/stencilMR-feature-image.png\",\"datePublished\":\"2022-03-31T16:14:47+00:00\",\"dateModified\":\"2023-01-21T05:30:27+00:00\",\"description\":\"In this tutorial, we\u2019ll use Nx to create a monorepo that includes React and Angular component libraries derived from a Stencil project.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/stencilMR-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/stencilMR-feature-image.png\",\"width\":1600,\"height\":880},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building React and Angular Component Libraries with Stencil and Nx\"}]},{\"@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\/a3190e4d49187220d0c720f2ceab9b58\",\"name\":\"Anthony Giuliano\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/10\/anthony-giuliano-profile-cropped-150x150.jpeg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/10\/anthony-giuliano-profile-cropped-150x150.jpeg\",\"caption\":\"Anthony Giuliano\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/anthonygiuliano1\/\",\"https:\/\/x.com\/a__giuliano\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/anthonyionic-io\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building React and Angular Component Libraries with Stencil and Nx - Ionic Blog","description":"In this tutorial, we\u2019ll use Nx to create a monorepo that includes React and Angular component libraries derived from a Stencil project.","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\/building-react-and-angular-component-libraries-with-stencil-and-nx","og_locale":"en_US","og_type":"article","og_title":"Building React and Angular Component Libraries with Stencil and Nx","og_description":"In this tutorial, we\u2019ll use Nx to create a monorepo that includes React and Angular component libraries derived from a Stencil project.","og_url":"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx","og_site_name":"Ionic Blog","article_published_time":"2022-03-31T16:14:47+00:00","article_modified_time":"2023-01-21T05:30:27+00:00","og_image":[{"width":1600,"height":880,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/stencilMR-feature-image.png","type":"image\/png"}],"author":"Anthony Giuliano","twitter_card":"summary_large_image","twitter_creator":"@a__giuliano","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Anthony Giuliano","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx"},"author":{"name":"Anthony Giuliano","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/a3190e4d49187220d0c720f2ceab9b58"},"headline":"Building React and Angular Component Libraries with Stencil and Nx","datePublished":"2022-03-31T16:14:47+00:00","dateModified":"2023-01-21T05:30:27+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx"},"wordCount":1673,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/stencilMR-feature-image.png","keywords":["Design Systems","stencil","web components"],"articleSection":["All","Stencil","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx","url":"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx","name":"Building React and Angular Component Libraries with Stencil and Nx - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/stencilMR-feature-image.png","datePublished":"2022-03-31T16:14:47+00:00","dateModified":"2023-01-21T05:30:27+00:00","description":"In this tutorial, we\u2019ll use Nx to create a monorepo that includes React and Angular component libraries derived from a Stencil project.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/stencilMR-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/stencilMR-feature-image.png","width":1600,"height":880},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/building-react-and-angular-component-libraries-with-stencil-and-nx#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Building React and Angular Component Libraries with Stencil and Nx"}]},{"@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\/a3190e4d49187220d0c720f2ceab9b58","name":"Anthony Giuliano","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/10\/anthony-giuliano-profile-cropped-150x150.jpeg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/10\/anthony-giuliano-profile-cropped-150x150.jpeg","caption":"Anthony Giuliano"},"sameAs":["https:\/\/www.linkedin.com\/in\/anthonygiuliano1\/","https:\/\/x.com\/a__giuliano"],"url":"https:\/\/ionic.io\/blog\/author\/anthonyionic-io"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/stencilMR-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4147","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\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=4147"}],"version-history":[{"count":1,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4147\/revisions"}],"predecessor-version":[{"id":4703,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4147\/revisions\/4703"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/4149"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=4147"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=4147"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=4147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}