Before we begin, ensure you have the following tools installed:
- Node.js (v14.16.1) or higher
- NPM (v7.6.2) or higher
- Android Studio for Android app development
- Xcode for iOS app development (macOS only)
Note: iOS app development is only possible on a macOS device.
‣ Setting Up Your Capacitor Project
To create a Capacitor application, navigate to your desired folder and execute the following command in your terminal:
Follow the prompts to install the package and set up your project. With Capacitor v3, your project directory should look like this:
With the initial setup complete, you’re ready to proceed.
‣ Project Restructuring
- Create a new folder
srcin the main directory.
- Create a new script file
- Create the Vite config file
vite.config.jsin the main directory.
- Remove the
Your new folder structure should resemble:
- Remove the script imports for Ionic PWA Elements if you’re not releasing the app as a PWA:
<capacitor-welcome>HTML element from the body.
Update the script import from
index.htmlis now ready.
To bundle our Node.js modules with Vite, we need a config file specifying the output destination for our bundled script. The following configuration will take the file
src/index.js and bundle it for production as
capacitor.config.json file, locate the
"bundledWebRuntime": true property and change it to
false. This adjustment ensures that Capacitor does not bundle the files, allowing us to use Vite for that purpose instead.
‣ Developing Your App
Now that the groundwork is laid, you can begin writing your application logic in the
src/index.js file. Here, you can import any necessary Node.js modules, define your app’s functionality, and interact with Capacitor’s native plugins.
This command will generate the
main.js file in your
www/js directory, which your
index.html file will reference.
‣ Testing and Debugging
Capacitor provides a convenient way to test your application on various platforms. Use the following commands to open your app in the respective platform’s development environment:
For iOS (macOS only):
These commands will allow you to run your application in Android Studio, Xcode, or your web browser, where you can test and debug as needed.
Remember to test thoroughly on all platforms and make use of Capacitor’s native plugins to enhance your app’s functionality. Happy coding!