Skip to content

⚡ Build blazing fast mobile apps with Gatsby and Capacitor.

License

Notifications You must be signed in to change notification settings

flogy/gatsby-starter-capacitor

Repository files navigation

Logo

📱 Build blazing fast mobile apps with Gatsby and Capacitor

gatsby-starter-capacitor

Pull requests are welcome! GitHub license

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

Screenshots

🚀 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 🙏