How to Run Your First Hello World App on Your iPhone

Image for post
Image for post

If you have never built a mobile application and you wish to do so, then you are in the right place. This blog will show you some easy simple steps to create a simple Hello-World application that runs on your iOS device (iPhone).

There are many tools you can use in your first mobile application such as Expo, Ionic, NativeScripts, and many others. I’m going to be using Expo because it is a great tool that works across platforms (iOS, Android, Web, and even Desktop), therefore, you only need to write your application once. Also, the way you build and run your application is easy and straightforward. So let's get started:

Get NodeJS Ready on Your Machine

Expo was built to serve React and React Native applications so make sure you have NodeJS installed on your machine. If you are using Linux-Ubuntu, I got the command handy for you. So just run the following commands in your terminal:

$ sudo apt update
$ sudo apt install nodejs
$ sudo apt install npm

This will update your package manager and then install Node.js latest version directly from the repositories. The last command is to install npm (Node.js package manager) which is required later on to install modules and packages for Node.js

Get Expo CLI

The Expo CLI (Command Line Tool) is where you are going to interact with the Expo tool. However, once you start your project (I will explain this in a moment), Expo will open your browser and fire up a GUI that you can also use instead of the command line. To get Expo CLI, run the following command:

$ npm install — global expo-cli

Download Expo Client on your iOS Device

On your iPhone, go to the app store and search for Expo Client then download it. Once downloaded, create your account to link Expo Client to your projects.

Create Your First Project

In your terminal, run the following command to create your first “Hello Wolrd” project using Expo:

$ expo init hello-world

After you run the command, in the terminal it will ask you to choose a template. For now, choose “blank a minimal app as clean as an empty canvas.” Just as described, this will create an empty project that has all the basic elements to run on your device.

Image for post
Image for post

It will take a few seconds to finish building your first hello-world project. Once it is complete, navigate to hello-world directory $ cd hello-world

Start the Server

Inside the project directory run $ expo start to load your project to the HTTP server. In other words, this will run your project so you can see it either on your device or on the emulator.

Image for post
Image for post

Open Expo Client on Your iPhone

You could do this in a few ways:
1) From your iOS device scan (using your camera) the QR code that shows up in your terminal. A message will appear on the top of your device indicating to open your Expo Client. Just click on it and it will open Expo and fire up your project.

2) You can get a link to your email, as it shows in the terminal, to fire up Expo Client with your project.

3) You can just directly open Expo Client and if you are connected to the same account, all your projects will show on the main screen. You can click on the one that has a green dot indicating it is currently loaded to the server.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Print Hello World

When your app first opens, it will show the text “Open up App.js to start working on your app!” Exactly as it instructs, open your project using your favorite editor, for me I’m using VS-Code, then navigate to App.js and change the Text tag to say “Hello World!” like this:

<Text>Hello World!</Text>

Watch the magic on your phone and see how cool is live updates.

Image for post
Image for post

Here you go, now you know how to make a Hello World Application on your phone. By the way, if you have an Android device, it is almost the same steps. Hope that was helpful in making your first mobile application. If you would like to add anything, please comment below.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store