Now that the value of Capacitor is clear, you need to integrate it into your existing web app. In this video, learn how to use Capacitor with an existing Ionic web app.
- [Instructor] In this video we're going … to learn how to integrate Capacitor … into our existing Ionic application. … Now in order to do this I'm going to … fire up a new terminal window here. … You're going to make sure you're in … the route folder of your application, … which is Tourista application in this case. … To integrate Capacitor we're going … to run the following commands, … ionic integrations enable capacitor, and we hit enter. … And this command is going to go ahead and install … the Capacitor core to our project for us … so that we're able to use it … and issue Capacitor specific commands. … Now the next thing we're going to do … is to instantiate Capacitor in our project. … So for this we're going to do npx, cap for Capacitor, … and we're going to use init to initialize it, … and it's going to ask us for our application name, … so we're just going to say Tourista, we hit enter, … and then it's going to ask us for our package ID. … Now to obtain our package ID we can simply …
- Setting up a development environment
- Scaffolding an Ionic app
- Using Ionic DevApp
- Working with Cordova
- Configuring for Android and iOS
- Running a mobile app on an emulator
- Using Ionic Appflow
- Updating Ionic apps with Deploy
- Converting Ionic apps to PWAs
- Testing on a mobile device
- Setting up Firebase Hosting
- Using Capacitor on the web
- Using Electron for desktop deployment
Skill Level Intermediate
Electron: Building Cross Platform Desktop Appswith Ray Villalobos1h 54m Intermediate
Angular: Maintaining Applicationswith Emmanuel Henri44m 29s Intermediate
Angular: Progressive Web Appswith Maximiliano Firtman4h 40m Intermediate
What you should know1m 22s
1. Setting Up the Environment
2. Building the Tourista Application
3. Testing on Mobile with Cordova
4. Ionic Appflow
5. Ionic PWA
6. Working with Capacitor
7. Deploying to the Desktop with Electron
Next steps2m 38s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.