Web Developer and Instructor sharing what I know about building mobile applications with web technologies such as Angular, Ionic Framework, Firebase, and nodejs
Are you using Capacitor on an Nx monorepo? Here's how you can remove the app level node modules ⚡️
Hey Reader,
If you’re adding Capacitor to your Nx monorepo, there’s really nice tool called Nx Extensions that lets you add Capacitor and then it generates new nx run commands for you.
It works fine in general, but due to how Capacitor looks for plugins, it made you install your capacitor plugins in the application level package.json file, which defeats one of the purposes of the monorepo, to have and maintain only 1 node_modules folder for all my apps and libraries.
For my personal project it was an inconvenience, because if I wanted to install packages I needed to jump between the 2 folders depending on what I needed to install.
For my work monorepo, it was more of a pain, imagine 200+ developers working on a monorepo, and every time a package changed in our app (for our 5 developer team) we had a lot of messages in the general chat asking why linter was failing for our app preventing them to push to github.
And we had to go and tell them, “oh, just cd into the app folder and run npm ci” 😅.
We started looking for a solution to this, and found something that works, we still have the 2 package.json files, but now we maintain only one node_modules/ folder.
And I’m happy to say, that since I implemented that change, there hasn’t been a single incident where devs from other teams have failing linters or processes because of us 🙌🏽.
Check out how we set up Capacitor without the app level node modules here.
Jorge Vergara
Web Developer and Instructor sharing what I know about building mobile applications with web technologies such as Angular, Ionic Framework, Firebase, and nodejs
Hey Reader, Changing the default styles of Ionic components can be a bit tricky since the components all use the shadow DOM, meaning we can't write CSS that targets the components inside the shadow DOM directly. Ionic has custom CSS variables in each component that allows us a lot of customization, and when those aren't enough, they expose CSS parts of the underlying HTML elements that form Ionic components. You can learn how to use shadow parts in this 3 minute video:...
Hey Reader, One cool thing about Ionic, specially when you're using capacitor, is that a lot of the functionality that you use in your mobile app can also be used for the web. Most of capacitor plugins have a web implementation, which means, you wouldn't have to write extra code to get it to work. Learn how to transform your Ionic app into a PWA. In today's article, you'll learn: How to use the `ng add` schematic to get all the boilerplate done for you. How to edit the `manifest` file to set...
Hey Reader, One cool thing about Ionic, specially when you're using capacitor, is that a lot of the functionality that you use in your mobile app can also be used for the web. Most of capacitor plugins have a web implementation, which means, you wouldn't have to write extra code to get it to work. Learn how to transform your Ionic app into a PWA. In today's article, you'll learn: How to use the `ng add` schematic to get all the boilerplate done for you. How to edit the `manifest` file to set...