Have you ever thought of having a single codebase for your web and mobile apps?
I was recently tasked with a SPIKE ticket to research the gap analysis of getting our app to Google Play and App Store. What immediately popped up in my head was react-native. So I searched for popular frameworks that supported this. The top choice was Solito. It solved 2 things:
- NextJS navigation on mobile
- patterns to build cross-platform apps
The problem was I had to rewrite a lot of code to convert it to react-native-web to support native components.
So I asked around the team for some perspective. One suggested CapacitorJS by Ionic. It was the perfect solution for the requirement!
Basic setup with my NextJS app
- basically, follow this guide https://capacitorjs.com/docs/getting-started
Few things to make your life easier
- Use JDK 17 (this is the best version to use with Android to prevent Gradle build issues)
- Use this guide to change your default version https://stackoverflow.com/a/24657630
- Create an
index.htmlfile inside your/publicdir that contains:
<head></head>
- see the note here why you have to do this https://capacitorjs.com/docs/getting-started#add-capacitor-to-your-web-app
Common build errors with npx cap sync
- if
/outdir is missing, you have to update yournext.config.jsto includeoutput: exportinstead ofoutput: standalone - if Gradle build errors, check if you are using the correct JDK version
- if iOS error
- update your XCode
- install cocoapods using
brew install cocoapods
Conclusion
Easy, right? Just make sure your web app is responsive and it should just work smoothly. 🚀 Good luck, mates!
Top comments (0)