📱 Build blazing fast mobile apps with Gatsby and Capacitor

gatsby-starter-capacitor

You want to build a blazing fast web app that can also be turned into a mobile app running on Android and iOS?

Then kick off your project with this boilerplate code. This starter ships with a default configuration of Gatsby combined with Capacitor, the spiritual successor to Apache Cordova and Adobe PhoneGap.

Need to integrate Capacitor into an existing project? Read this article: Build blazing fast mobile apps with Gatsby and Capacitor

🚀 Quick start

1. Create a Gatsby site.

   Use the Gatsby CLI to create a new site, specifying the gatsby-starter-capacitor.

   # create a new Gatsby site using the gatsby-starter-capacitor starter
   gatsby new my-gatsby-capacitor-project https://github.com/flogy/gatsby-starter-capacitor

2. Start developing.

   Navigate into your new site’s directory and start it up.

   cd my-gatsby-capacitor-project/
   npx gatsby develop

3. Open the source code and start editing!

   Your site is now running at http://localhost:8000!

   Open the my-hello-world-starter directory in your code editor of choice and edit src/pages/index.tsx. Save your changes and the browser will update in real time!

4. Build and start app for Android.

   Build the project and prepare it for Android (requires all dependencies installed as mentioned in the Capacitor documentation).

   npx gatsby build
   npx cap update android
   npx cap copy android
   npx cap open android

   Start your app from Android Studio which should now be opened.

   After an initial start, you can use the NPM scripts npm run build and npm run start:android to restart / apply code changes.

5. Build and start app for iOS.

   Build the project and prepare it for iOS (requires all dependencies installed as mentioned in the Capacitor documentation).

   npx gatsby build
   npx cap update ios
   npx cap copy ios
   npx cap open ios

   Start your app from Xcode which should now be opened.

   After an initial start, you can use the NPM scripts npm run build and npm run start:ios to restart / apply code changes.

Contribute 🦸

Contributions are more than welcome! I love how Gatsby helps us developers building great web apps in a short time. That's why I'd like to give back with contributions like this. If you feel the same and would like to join me in this project it would be awesome to get in touch! 😊

Please feel free to create, comment and of course solve some of the issues. To get started you can also go for the easier issues marked with the good first issue label if you like.

License

The MIT License

Credits

The gatsby-starter-capacitor starter is maintained and sponsored by the Swiss web and mobile app development company Florian Gyger Software.

If this library saved you some time and money please consider sponsoring me, so I can build more libraries for free and actively maintain them for you. Thank you 🙏