Introduction: Building with Capacitor and DaisyUI
Hello and welcome back to the channel. This is going to be a video on creating a mobile application. Of course, we will use capacitor to package up the application, but we're going to use a different UI, 'cause normally with capacitor, people know capacitor through Ionic framework. Ionic framework is a component library. Capacitor allows you to package a web application in a native runtime, and it has a series of plugins that you can associate with it to kind of build more robust mobile applications.
Most people who don't want to use Ionic framework usually say it's because they want a more customized experience and that incorporating Tailwind with Ionic framework components is a challenge. So what I'm going to do is I'm going to try this component library called DaisyUI. It's based on Tailwind, and so to kind of show how this is done, what I'm going to do is I will create a Vite application with Tailwind, then I will add DaisyUI to it. I will show the web application running, then I will package it up with Capacitor, and then we'll deploy it on iOS.
Another note is that normally the process that I've used is using a plugin, a Visual Studio Code plugin from Ionic that simplifies this process drastically. But what I'll do in this video is I won't use the Ionic plugin. I will show you exactly how to do it step by step using all these command lines, CLI and the manual modification of files to set up and configure, just so that you know what's really happening under their covers. But I strongly encourage you, if you use Visual Studio Code, to download the Ionic plugin. It makes this process a lot easier. You just open up your web project inside of Visual Studio Code, you click on the Ionic plugin, it identifies the web project, and then it just takes you through a step-by-step process to package it up. It's much cleaner, but I'm just doing this so that you have the foundation. So let's get started.
Scaffolding a Vite and React Project
All right, so the first thing we're going to do is we're going to install this Tailwind with Vite because I want to make sure that I get a TypeScript project. I know some folks will ask, well, why don't I use what is provided inside of Daisy? But what's provided inside of Daisy, if you scroll down here and you look at this Vite React example that they provide, uh, it's not using TypeScript, and I'm a big advocate of TypeScript. I want a default template for TypeScript, and so that's why I'm going to build mine from scratch. Otherwise, I would have just started with this. So if you want TypeScript, this is the process. So we're just going to follow these steps here, and let's see how this goes.
So of course, I'm changing the name. All right. I'm not going to bother upgrading in the middle of this video, so hopefully this works. So let's CD to my Daisy project, clear so we have some space, and then let's see what is. So we've done that step. Now let's do the Tailwind stuff.
Okay, so next we need to edit our Tailwind config. So let's just open up code.
Installing and Configuring Tailwind CSS
I'll put this in a new window. All right. So the next step is to modify my Tailwind config to include the appropriate files. So we'll go to our Tailwind config, we'll just replace all this, and then add the Tailwind CSS. So let's copy that. Let's go back to our project, we'll go into our source directory, we'll go to index.css. Let's just, to make it simple, let's just remove all of this and we'll put our Tailwind base in. And let's do the same here. Let's move everything out of this one so there's nothing left lying around. And then, well before I run, let's just copy this default app. So let's go over to our app.jsx and let's just remove all this and then now we will run our project. So we'll open up a terminal window down here.
Testing the Initial Tailwind Setup
Now let's open it up. Okay, let's make a little room over here on the side for our browser window. And you can see that we have Tailwind going. Let's put a div around this so we have a little bit of space to work with here. We have our div, and let's put some style, class name, background gray. So you can see that we have our Tailwind in here. Okay. And then let's add a button. And then let's add a little gap. We have Tailwind running inside our application.
And so, but the next part is that we want to leverage DaisyUI.
Integrating DaisyUI for Themed Components
Let's go over to DaisyUI and you can see the reason why I want to use DaisyUI is that we kind of get these out of the box... not out of the box, we get these predefined components with themes. So you get these components that you can just drop inside of your application and then you can adjust them with themes. And these are usually components that you will probably find some use for in your application.
We'll definitely need to take a look, you know, if this video does well, we'll take a look at things like this. You know, we got a navbar, it gives you a pagination component, definitely tabs. We'll definitely want to use tabs in our application. You know, just scrolling through here you can see them. I did notice there's a couple of key, key ones that are missing, and maybe this is because I'm just biased from using Ionic. Like I don't see a calendar, I don't see a date picker, I don't see some of the more complex components, but I guess if it's just based on Tailwind I can find some Tailwind library and kind of incorporate them. I like to just have, like I said, I'm probably just used to Ionic, I like just the fact that pretty much everything I need is right there. I don't need to start importing other libraries to kind of get things working.
So, all right, now we have our Tailwind app running. Let's go back up to Daisy and follow their installation instructions. So let's install DaisyUI here, and we'll run our commands down here. Hopefully you can see that. DaisyUI install, so we've installed that. Then we need to... we're using ESM so we need to kind of update our Tailwind config and that should be it.
So let's run this again. Then let's add a button using DaisyUI. All right. And so you see it's using this button and this primary button. These are from DaisyUI, and there's our button. So now we have DaisyUI incorporated. Let's see if there's something that stands out a little bit more that I could drop in very quickly. Let's see if I got some quick code for a select I can drop in to just demonstrate. Yeah, let's, here we go. Let's take this. All right. So we have some DaisyUI components here. Let's make this a little bit bigger so you can see. All right, these are all Tailwind-based so I could add my own Tailwind to it. Okay. So now we have our Tailwind incorporated, we have DaisyUI incorporated, and we have our website. But now the next step is to turn this thing into a application.
Adding Capacitor to the Web Project
So now let's switch over to Capacitor. Actually, to get an app started... this creates a new Capacitor app, but what we really want to do is you want to install Capacitor in the root of an existing application. So we're going to start down here with install Capacitor and then install the CLI. And then let's initialize the configuration. It'll ask us a couple of questions about our app. Now it is set up.
Let's just talk about a couple things that got added. It added your Capacitor configuration. The important thing here really is where, when you build your app, where will the output go? 'Cause Capacitor needs it to package it up for the mobile app, and with a Vite it's going to be in their dist. Looks like it's mostly just Capacitor config at this point. Okay, so the next thing is, like, we're going to try and do both in this example. So I'm going to install the Android package and the iOS package for Capacitor. Those two packages were added.
Preparing and Building the iOS App
All right, so these were the npm packages, but now I need to add the functionality to my actual app. And I'll do uh, iOS first. But so one of the things that I found, it's usually best to build it once before you try to add the mobile package to it. So we're just going to do an npm run build. And you do this 'cause it's looking for the dist directory as part of the package. So now we have the dist directory here and your application got packaged up there.
And so now we will add iOS. Alright, so now we've added iOS. And now this, the sync moves the web stuff into the application package. And then the next step is the run, but I believe my run will do the same thing as sync. But we'll just go through the sync just so you can see the process. So if I copy the sync... and you can see here, what it says it's doing is copying the web assets. Actually, it looked like it did all that when I built it, but just from the developer workflow, what will happen is that as you make changes to your application, you're going to want to sync and then run. That's the process: sync and then run, sync and then run, right? So I just synced, and now npx cap run ios.
Running the App on an iOS Simulator
You have to specify the platform, and you can see it's syncing it beforehand, so I was correct. So maybe, uh, so I believe, once again, I use the plugin, I don't know, run from the command line. So you can see now I said I'm going to run, and it identifies the simulators that I have on my computer. If you're going to run, if you're going to test on iOS, you have to have Xcode installed and running. If you're going to do Android, you have to have Android Studio installed and running. Otherwise this stuff will just fail out on you. I'm going to try to use a simulator that I've used before so it doesn't take forever to kind of boot up, let's hope so.
If everything works correctly, it should run an Xcode build in the background and then it should fire up the emulator for us. Once again, for those Android folks out here, the only thing different that you would do is, where is it, you would do an npx cap add android. You would do npx cap sync, it just will sync any platforms that are there so it should sync the Android platform if that's what you did. Then you do npx cap run android. If there's any errors that you run into, you can do an npx cap open the platform and then it will find iOS, uh, sorry, Xcode or Android Studio and launch that with your project set as the current project to be worked on.
Now, one of the other challenges that you might run into sometimes is that it won't build the app. And it won't build the app specifically on iOS because you haven't set up your developer account and selected the proper certs inside of Xcode, so it doesn't know how to build it correctly. So you can see now it's deploying the app. So it should be trying to launch the simulator here. So you can see that the app is deployed.
Conclusion: Your Web Skills on Mobile
So through Capacitor, Vite, Tailwind, and DaisyUI, we were able to get an application deployed onto a phone and then now do all the things you want to do that you find interesting on a mobile application, leveraging your web skills. As you know, since this is just a regular React application, you can write whatever React code in here, you can leverage all your existing experience, you can leverage all your existing, you can leverage all your existing tools and build an application in an environment that you're comfortable with, instead of trying to learn something new like Flutter or React Native or Kotlin or Swift or Objective-C.
So hopefully you found this interesting. If you want to see more content like this, please let me know. Thanks and I will see you next time.
