DEV Community

Cover image for How I Created and Deployed An iPhone (and Android) App Without A Mac, And So Can You Too
Peter
Peter

Posted on

How I Created and Deployed An iPhone (and Android) App Without A Mac, And So Can You Too

Cover Image by freepik

Late last year, I decided that I wanted to make my own iPhone app, but my problem was that I didn't have a Mac. However, earlier this year, I released my first iPhone app, LinkBuddy! How'd I do it? Read on below to see how I did it and my journey as a first-time mobile app developer.

My Background

  • I have an undergraduate computer science degree.
  • I've programmed on and off since then with a job as a deployment engineer until 2019, becoming an engineering manager until late 2023, where I still spent about 30% of my time doing individual contributor work.
  • I also dabble in the homelab world, have multiple self-hosted applications that I use daily with a great 3-2-1 backup strategy.
  • I go through stints where I want to learn something new and spend weeks and months learning it, and have dozens of half-finished projects and small scripts for various things over my two-decade career. So, I am not new to programming and making things, but I have only completed one project to completion for a broad public.

What I Did To Learn React Native and Expo

Courses I took:

React Native Tutorial for Beginners - YouTube

  • I've gone through tutorial hell often, watching an endless stream of tutorials that just don't click.
  • This course was great for me because one, it was made within the last year (at the time I took the course anyway). It seemed anything older than this had out-of-date information (using an older version of React Native) and it would throw me off when I encountered something that wasn't done using the more recent versions of React Native/Expo.
  • It had bite-sized lessons, where the lessons were short and to the point about specific topics and didn't go through how to program and spoke to viewers as if they were already familiar with programming, which didn't know React Native/Expo.
  • A majority of the lessons were under 5 minutes, and then an example of implementation into a real project. Perfect time to get a good overview of essential components. I watched many of the lessons multiple times to get a good grasp and tried my hand at the lessons multiple times over. For those of you new to tutorials, don't feel like you suck if you needed to re-watch something. It's the point of learning; you may not understand something the first time, but keeping up the repetition helps a lot, and then it will just click.

React Native Course for Beginners in 2024 | Build a Full Stack React Native App - YouTube

  • I really enjoyed this longer form course,

Courses I tried to take but stopped because they were using outdated information or using an older version of React Native.

The Complete React Native + Hooks Course | Udemy

  • I've taken other courses by Stephen Grider, and they've been great. However, this one was definitely a few years old, and the time in the course is misleading; it includes an even older version of the course, doubling the content time that won't really be watched. However, he does give you a good methodology around creating components and got me into a good mindset of a good workflow, and his diagrams are really great. However, as a beginner with React Native, when I went to implementing the examples myself, I couldn't because this course was based on an older version of React Native. I did jump around the course and definitely got good use of certain lectures since the previous two didn't cover certain topics, so I didn't quite write this off yet, but I don't think this course was a pass for me.

Other Great Resources

Next Steps - Creating My Own App

With a good base knowledge, I decided to jump into and make my own app for something I use every day.

Enter Linkding:

This is a self-hosted URL bookmark and archival service. I tried several in the last year but nothing checked all the boxes for me except linkding. It's open-source, lightweight, fast, actively supported, written in Python (my most recent programming language), has support for archiving pages locally with SingleFile (as well as having the ability to upload your own archive if SingleFile can't get past Cloudflare-backed pages) and on the Internet Archive, has a pretty robust and documented REST API, and has multi-user support. It's not perfect but comes as close as it gets for me.

I know that there are several apps for linkding on mobile phones, but I decided I wanted to use this as my first foray into building mobile apps anyway. If I didn't complete it, then I still have apps I can use.

Building The App

iOS Build

  • Use EAS if you do not have a Mac. You get 15 free iOS builds from Expo a month (total of 30 builds per month), which should be plenty to deploy your app if it's not too complex (one that doesn't require you to use any native iOS code). Make sure that you are aware of React Native/Expo components you need upfront for the development clients, since this is the time when all the planning comes pays off. If you use a component not supported by Expo out-of-the-box, you should include it now to avoid wasting your build quota for the month.

  • After running eas build:configure, you'll first have to update your eas.json to add in various profiles for building your app for different environments.

  • I used EAS services for the iOS build and submit with the below commands:

eas build --profile development --platform ios
eas build --profile preview --platform ios
eas build --profile production --platform ios
eas build --profile production:simulator --platform ios
eas submit --platform ios

Android Build

  • For the Android build, I released it later than the iOS release and decided to just rely on the GitHub releases instead of going through the onerous process (if you do not have a corporate account) of the Google Play Store. For this process, I decided to find a good workflow and use that to build when the version uploaded to GitHub was tagged with a version number. After some research and a few tries, but this was the workflow I ended up using:

Github Workflow

  • My process here was similar to iOS, except for the build and release.
  • Build a development client and preview versions of your app.
  • Confirmed working workflow here, setup requires an Expo token
  • I combined this with the release workflow, setup requires a GitHub token. I created a fine-grained PAT for this.
  • With these two combined, an Expo local build is only triggered when a tagged commit is pushed to the repo; it'll create a release draft for manual review and push. Commands from the command line I used below:

git tag <tagname> <commit hash>

ex:

git tag v1.1.1 commithash

git push origin --tags

Preparing For App Store Submission

  • Prepare screenshots for your app.
  • Screenshots were an issue for me for app store submission; you'll need at least either 6.9" (iPhone 16 Pro Max) or 6.5" (iPhone 16 Pro), and if your app has a tablet version, you'll need 12.9" (iPad Pro 12.9") screenshots.
  • - I didn't have the latest iPhones, so I used appetize with a simulator build and took screenshots. You are only limited to 3 minutes per session and 30 minutes in total, monthly, so not a lot of time. If you need more time for screenshots, then you'll have to shell out for a pro plan or get a Mac and the latest iPhones with the supported screen sizes.
  • If you only want for the app to be available on the iPhone, in your app.config/app.config.js, set supportsTablet: false before building your app.
  • Create a site for your privacy policy.
  • Create a place where users can go for support; since my app is a
  • Create an email address for support issues.

Testing and Deploying The App

  • Sign up and pay for a Apple Developer Account.
  • Turn on Developer Mode on your iPhone in Settings.
  • Fill out all necessary information in the forms for app submission.
  • Test your builds using either preview or testflight builds.
  • Get some testers and watch how they use your app; sometimes they'll do something that you will never do yourself and you'll see that you'll need to change something.
  • Test your app in both light mode and dark mode.
  • Fix your bugs, rinse and repeat until you are in a good place.
  • Get tester information for the app reviewer ready that can be accessed by the reviewer. I stood up an instance of the backend using pikapods, the linkding author gets a cut from the subscriptions on pikapods, so it's a good way to support open-source projects; his disclosures are here. The author, generously, donates all the revenue to other causes.

Lessons Learned

  • Read the React Native and Expo Documentation, it’s some of the best in-class documentation I’ve come across.
  • Use the Expo Development Client, not Expo Go; Expo Go is great for local testing, and you can make changes (as long as the components you use are supported in Expo) without creating a new build of an app, which, if you don't use a paid tier of Expo, can get costly, but Expo Development Client is the way to go.
  • Research the components you need and try to stick with actively supported components. If the components are not supported by Expo by default, you will have to create a new build to incorporate it, so planning and research is essential to lower costs and time to develop. An actively supported component also means someone might likely have the same problems you ran across. Read the issue tracker (both open and closed issues) to see tips on how people fixed their issues.
  • If you are generating a new build on the free tier of EAS, and don't want to wait hours to complete it, submit it off-hours. I felt that after 8 PM ET seemed to be the best time that allowed for virtually no wait time in the queue to get my app built. I found this dashboard from Expo useful.
  • If you do not have a Mac, however, you're not out of it yet and need raw screenshots for app store submission; build a simulator version in EAS and use appetize, the free tier gives you 30 minutes per month, but only 3 minutes per session, so be quick once you start a session! Luckily Apple changed their guidelines to allow for only one set of iPhone and one iPad last year.
  • Speaking of screenshots, if your configuration in your app.json is set to tabletMode: true, then you will need to submit iPad screenshots; set this to false to avoid this requirement.
  • Be very careful of the data you are submitting to the testers; if you have a link like I had to use YouTube, then it will be rejected because it needs to be rated as 17+. But best to comply with the rules and do as the reviewer suggested to get your app approved.

What I Would Do Differently

  • Learn a testing framework like Jest or Vitest; manually testing after each build took a decent amount of time after making changes.
  • Not necessary, but I would've liked to have purchased a Mac to save on build costs, but this is not necessary as Expo free tier has a pretty good level of 30 builds free (15 iOS), but I could also argue that the limit of builds in EAS gave me a good constraint to have focused features and to only build when I felt my version was in a good place.

Conclusion

  • App dev is fun, and if you aren't worried about making money and just making something fun or something you want to use.
  • Do your research on what components you want to use, otherwise, you'll go through dependency hell.
  • Use EAS and/or github to build and deploy your app.
  • Use a service like appetize for screenshots.
  • Check out the source code on GitHub for my app, LinkBuddy.
  • Check out LinkBuddy on Apple App Store
  • For Android, use Obtainium or download the apk release in GitHub.

Please feel free to ask me any questions!

Top comments (1)

Collapse
 
jamey_h_77980273155d088d1 profile image
Jamie H

Nice posting! Can we talk?

Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more