{"id":177,"date":"2021-12-14T18:51:14","date_gmt":"2021-12-14T18:51:14","guid":{"rendered":"https:\/\/engy.us\/blog\/?p=177"},"modified":"2021-12-31T18:16:14","modified_gmt":"2021-12-31T18:16:14","slug":"monorepo-with-npm-workspaces-and-typescript","status":"publish","type":"post","link":"https:\/\/engy.us\/blog\/2021\/12\/14\/monorepo-with-npm-workspaces-and-typescript\/","title":{"rendered":"Monorepo with NPM Workspaces and Typescript"},"content":{"rendered":"\n<p>I recently needed to set up a project with a monorepo and was searching about for a good guide or example. Nothing I found was quite right. <a href=\"https:\/\/github.com\/NiGhTTraX\/ts-monorepo\/tree\/npm\">This repo had a rather extensive example but brought in lerna, which I wanted to avoid<\/a>. <a href=\"https:\/\/github.com\/aosteraas\/monorepo-mvp\">This one was a bit simpler but was using yarn in the examples<\/a>.<\/p>\n\n\n\n<p>I created <a href=\"https:\/\/github.com\/RandomEngy\/ts-npm-monorepo\">ts-npm-monorepo<\/a> as a bare-bones example for how to set up a monorepo with Typescript using only NPM Workspaces.<\/p>\n\n\n\n<p>This is working well: I only have one copy of <code>node_modules<\/code> at the root and all the packages share it. The packages are set up with Typescript project references, so everything builds in the proper order and changes are immediately reflected. I can also add any shared external dependencies in the root <code>package.json<\/code> and they&#8217;ll be available in any package in the repo.<\/p>\n\n\n\n<p>(Edit) After reading up a bit more on Yarn it&#8217;s pretty great and I&#8217;ve switched to using Yarn workspaces.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I recently needed to set up a project with a monorepo and was searching about for a good guide or example. Nothing I found was quite right. This repo had a rather extensive example but brought in lerna, which I wanted to avoid. This one was a bit simpler but was using yarn in the &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/engy.us\/blog\/2021\/12\/14\/monorepo-with-npm-workspaces-and-typescript\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Monorepo with NPM Workspaces and Typescript&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[1],"tags":[],"jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pahBcK-2R","jetpack-related-posts":[{"id":165,"url":"https:\/\/engy.us\/blog\/2021\/10\/03\/efficient-svg-icons-in-web-components-with-webpack-and-svgo\/","url_meta":{"origin":177,"position":0},"title":"Efficient SVG icons in Web Components with Webpack and SVGO","date":"October 3, 2021","format":false,"excerpt":"So many ways to load them There are a lot of different ways to show an SVG on a webpage: <img>, <embed>, <object>, <iframe>, <canvas> and <svg> among them. I think for any halfway modern browser there are really only two serious contenders here. Referencing an SVG file: <img src=\"image.svg\"\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":79,"url":"https:\/\/engy.us\/blog\/2018\/10\/03\/wpf-databinding-using-dynamicdata\/","url_meta":{"origin":177,"position":1},"title":"WPF Databinding using DynamicData","date":"October 3, 2018","format":false,"excerpt":"My project is MVVM and I had been using ReactiveList<T> as my go-to observable collection for viewmodel properties. But ReactiveUI deprecated ReactiveList in 8.6.1. So I needed to get on to the new recommended library: DynamicData. But there is no direct drop-in replacement you can do like ObservableCollection<T> <-> ReactiveList<T>.\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":174,"url":"https:\/\/engy.us\/blog\/2021\/12\/11\/aws-cognito-authentication-in-electron\/","url_meta":{"origin":177,"position":2},"title":"AWS Cognito Authentication in Electron","date":"December 11, 2021","format":false,"excerpt":"The AWS Cognito authentication service as of this writing does not officially support the Electron platform. But there is a Javascript SDK for Cognito, as part of AWS Amplify. Others have tried using it on Electron but have run into issues. I ran into several more than what are described\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i2.wp.com\/engy.us\/blog\/wp-content\/uploads\/2021\/12\/image.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":25,"url":"https:\/\/engy.us\/blog\/2012\/04\/06\/datetime-and-datetimeoffset-in-net-good-practices-and-common-pitfalls\/","url_meta":{"origin":177,"position":3},"title":"DateTime and DateTimeOffset in .NET: Good practices and common pitfalls","date":"April 6, 2012","format":false,"excerpt":"It becomes necessary to deal with dates and times in most .NET programs. A lot of programs use DateTime but that structure is frought with potential issues when you start serializing, parsing, comparing\u00a0and displaying dates from\u00a0different time zones and cultures. In this post I will go over these issues and\u00a0the\u2026","rel":"","context":"In \".net\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":43,"url":"https:\/\/engy.us\/blog\/2010\/03\/08\/saving-window-size-and-location-in-wpf-and-winforms\/","url_meta":{"origin":177,"position":4},"title":"Saving window size and location in WPF and WinForms","date":"March 8, 2010","format":false,"excerpt":"A common user interface tweak is to save the size and location of a window and restore that state when the program starts up again. That way, the users don\u2019t need to re-do their work of resizing and moving the windows to where they want them. However I\u2019ve found that\u2026","rel":"","context":"With 21 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":88,"url":"https:\/\/engy.us\/blog\/2018\/10\/20\/dark-theme-in-wpf\/","url_meta":{"origin":177,"position":5},"title":"Dark Theme in WPF","date":"October 20, 2018","format":false,"excerpt":"In a recent Windows 10 update a toggle switch was added to allow the user to specify that they wanted \"Dark\" themes in apps: I decided to add support for this to VidCoder. But no updates to WPF were made to make this easy. WPF does having theming support where\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"https:\/\/i2.wp.com\/engy.us\/blog\/wp-content\/uploads\/2018\/10\/VidCoderDarkExample.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/engy.us\/blog\/wp-json\/wp\/v2\/posts\/177"}],"collection":[{"href":"https:\/\/engy.us\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/engy.us\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/engy.us\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/engy.us\/blog\/wp-json\/wp\/v2\/comments?post=177"}],"version-history":[{"count":2,"href":"https:\/\/engy.us\/blog\/wp-json\/wp\/v2\/posts\/177\/revisions"}],"predecessor-version":[{"id":183,"href":"https:\/\/engy.us\/blog\/wp-json\/wp\/v2\/posts\/177\/revisions\/183"}],"wp:attachment":[{"href":"https:\/\/engy.us\/blog\/wp-json\/wp\/v2\/media?parent=177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/engy.us\/blog\/wp-json\/wp\/v2\/categories?post=177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/engy.us\/blog\/wp-json\/wp\/v2\/tags?post=177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}