{"id":5137,"date":"2023-04-27T10:58:28","date_gmt":"2023-04-27T14:58:28","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=5137"},"modified":"2023-04-27T10:58:30","modified_gmt":"2023-04-27T14:58:30","slug":"create-powerful-native-mobile-apps-with-capacitor-vanillajs","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/create-powerful-native-mobile-apps-with-capacitor-vanillajs","title":{"rendered":"Create Powerful Native Mobile Apps with Capacitor & VanillaJS"},"content":{"rendered":"\n

This is a guest post from Simon Grimm, Ionic Developer Expert and educator at the Ionic Academy<\/a>, an online school with 70+ video courses focused entirely on building awesome mobile apps with Ionic.<\/em><\/p>\n\n\n\n

CapacitorJS<\/a> is an open-source framework that allows developers to build cross-platform mobile apps using web technologies. It provides a set of APIs and plugins to access native functionality and device features that are not typically available in web applications, such as the camera or File system.<\/p>\n\n\n\n

With Capacitor, every web developer can create high-performance native mobile apps for iOS and Android using familiar web development tools and workflows, without having to learn a completely new language.<\/p>\n\n\n\n

While Capacitor can be used with popular JavaScript frameworks like Angular<\/a> and React<\/a>, it is also possible to use it with VanillaJS. In this tutorial, we will learn how to use Capacitor with VanillaJS to create powerful native iOS and Android apps.<\/p>\n\n\n\n\n\n\n\n

By using VanillaJS, we can keep our codebase lightweight and avoid the complexity that comes with larger frameworks. This makes it easier to maintain, update and scale our application over time – and you don’t need to fear the release of the next trendy JavaScript framework.<\/p>\n\n\n\n

By the end of this tutorial, you\u2019ll be able to get a simple photo storage app up and running – no native skills required. Thanks to Capacitor\u2019s integration with device features and VanillaJS\u2019s simple learning curve, you can create a fully functional, clean looking app in just minutes. <\/strong><\/p>\n\n\n\n

You can also take a look at the Capacitor VanillaJS app on Github<\/a>!<\/p>\n\n\n\n

Getting Started<\/strong><\/h2>\n\n\n\n

Before we dive into creating a simple Capacitor app with VanillaJS, I highly recommend you check out this great guide containing everything you\u2019ve ever wanted to know about Capacitor.<\/a><\/p>\n\n\n\n

Creating a Capacitor App<\/strong><\/h3>\n\n\n\n

Since we are not using any framework in this tutorial, we can directly scaffold a basic Capacitor app like this:<\/p>\n\n\n\n

npm init @capacitor\/app<\/code><\/pre>\n\n\n\n
Follow the prompts, give your app a name, and once you are done you can install all dependencies and immediately run your app on the browser:<\/p>\n\n\n\n
npm install\nnpm run start<\/code><\/pre>\n\n\n\n
This should start a Vite development server and your app is served at http:\/\/localhost:3000\/<\/a> with some basic elements.<\/p>\n\n\n\n
We could already turn this into a native iOS and Android app now, but first, let’s add some more features.<\/p>\n\n\n\n
Adding TailwindCSS<\/strong><\/h3>\n\n\n\n
You can style your web app as always with just CSS, but throwing in TailwindCSS makes it easy to create a great-looking app in minutes, without committing to any JS framework.<\/p>\n\n\n\n
To do so, simply install it as described:<\/p>\n\n\n\n
npm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init<\/code><\/pre>\n\n\n\n
Now we just need to make sure we are including our files in the tailwind.config.js<\/code>:<\/p>\n\n\n\n
\/** @type {import('tailwindcss').Config} *\/\nmodule.exports = {\n  content: ['.\/src\/**\/*.{html,js}'],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n};<\/code><\/pre>\n\n\n\n
Lastly, we need to load the Tailwind classes, so let’s add the following to our src\/css\/style.css<\/code>:<\/p>\n\n\n\n
\/* Add Tailwind imports *\/\n@tailwind base;\n@tailwind components;\n@tailwind utilities;<\/code><\/pre>\n\n\n\n
You can confirm that everything works correctly by adding some Tailwind utility classes to an element:<\/p>\n\n\n\n
<h1 class="m-4 font-bold text-4xl underline">TEST<\/h1><\/code><\/pre>\n\n\n\n
This should result in a styled header element, and you should restart your live reload after all the previous steps.<\/p>\n\n\n\n
\"\"