What Could Go Wrong? "Setting Up EAS for Fast React Native Deployment"

Following tutorials you get from the web is risky. Usually it’s not risky in terms of actual damage being done, but “risky” in terms of the chances of successfully following the tutorial and doing what’s being described.

Technology changes. Versions of dependencies and packages change. Our local environments are different. What works for one person may… or may NOT work for you. That’s what the “What Could Go Wrong?” series of blog posts will be about. I’ll be trying to follow the instructions given in earlier blog posts, and discovering for myself what went wrong.

Following a tutorial is not like following a cake recipe. You don’t necessarily just need to add in so many cups of flour, this much sugar, some eggs, bake it in a pan, and out comes a cake. Learning to code by following tutorials is more of an adventure. It’s like you discovered an old map of a pirate’s treasure, but you’re never quite certain if the island is where it’s marked if the treasure is there, or what booby-traps guard it. Or even if there IS any treasure!

That said, let’s start this treasure hunt! In this blog post, I try to follow the tutorial, https://janellgames.hashnode.dev/setting-up-eas-for-fast-react-native-deployment. Sounds simple - we’re just setting up EAS, right? What could go wrong?

Step 1: Install Expo & EAS CLI

My instructions say to install Expo CLI and EAS CLI globally with npm install -g expo-cli eas-cli

Sounds simple enough! IF you have an up to date version of npm. Fortunately, I do. But many people who try to follow new tutorials DON’T already have their local environment set up for coding. They may not have NPM already installed on their machine. They may not even understand that the instructions mean that you should open up a terminal (what’s that?) and copy/paste that command onto the command line (again, what’s that?). If you don’t already understand what a terminal or command line is, this is not going to be a successful tutorial for you. If you have npm but it’s out of date, when you try to run the command you may get a prompt telling you to update npm. Once you do that, it should work.

I was lucky. When I ran the command, it worked. NPM found the packages and installed them correctly. Yay!

Step 2: Create an Expo Account & Log In

Ok, that doesn’t sound to bad. I went to expo.dev and tried to make an account. Found out I already had an account associated with my email. No big deal. A password reset allowed me to log in to the website. Then, back on my command line, I ran expo login, entered my email and password, and got the response Logged In. So far so good!

Step 3: Initialize EAS in Your Project

Wait, I don’t have a project yet! We’re just starting! Ok, well let’s make a project folder. The instructions say “Navigate to your React Native project folder (or create a new one) and run: eas init".

So, I made a new folder to hold React Native projects and ran eas init. It didn’t work.
I got the error message Run this command inside a project directory. Error: project:init command failed.

Now we’ve gotten to the first problem with following tutorials blindly. I read “Navigate to your React Native project folder” as “Go to the project folder where you will be storing your React Native projects”.

Looks like what it really meant was “Go to inside the project folder of your already existing React Native project.”

So! I need to have a React Native project already if this is going to work. Do I stop here and go build a project? What if I don’t know how to do that?

The order of doing things matters, and sometimes you have to figure things out as you go. Ok, USUALLY you are figuring things out as you go when you’re coding. Or at least I am. I’ve been coding a bit over five years and it’s a very rare moment when I feel like I already know how to do every step of the task in front of me.

Lucky for me, the next blog post I’ll be looking at is about creating a very basic React Native app. Looks like I need to hop over there and at least create the project…. Hm! So I need to run expo init QuickNotes…

Annnd now I get a whole bunch of warnings:

WARNING: The legacy expo-cli does not support Node +17. Migrate to the new local Expo CLI: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421.
┌───────────────────────────────────────────────────────────────────────────┐
│                                                                           │
│   The global expo-cli package has been deprecated.                        │
│                                                                           │
│   The new Expo CLI is now bundled in your project in the expo package.    │
│   Learn more: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421.        │
│                                                                           │
│   To use the local CLI instead (recommended in SDK 46 and higher), run:   │
│   › npx expo <command>                                                    │
│                                                                           │
└───────────────────────────────────────────────────────────────────────────┘

Migrate to using:
› npx create-expo-app --template

? Choose a template: › - Use arrow-keys. Return to submit.
    ----- Managed workflow -----
❯   blank               a minimal app as clean as an empty canvas
    blank (TypeScript)  same as blank but with TypeScript configuration
    tabs (TypeScript)   several example screens and tabs using react-navigation and TypeScript
    ----- Bare workflow -----
    minimal             bare and minimal, just the essentials to get you started

Wait, what? What does all this mean? Now I'm starting to get confused. I gave that information to ChatGPT and had it translate for me. It said:

This warning is telling you that the globally installed expo-cli is deprecated and not fully compatible with newer Node versions (like Node 17 and above). Instead, Expo now bundles its CLI directly into your project via the expo package, and it’s recommended that you use the CLI locally with the npx command.

Below is what’s happening and what you should do:

What’s Happening Deprecated Global CLI: The global expo-cli (which you installed previously) is now outdated. Its limitations include compatibility Issues with newer Node versions, and it doesn’t take advantage of the latest features and improvements provided by Expo.

New Local CLI Approach: The new workflow recommends using the local CLI that comes with the expo package. This means you don’t need a separate global installation; instead, you run Expo commands using npx (or yarn/npm scripts). This change helps ensure that your project always uses a version of the CLI that’s consistent with your project’s Expo SDK version.

What You Should Do Use the New Command for Creating Projects: Instead of running expo init QuickNotes, the recommended approach is to run:

npx create-expo-app QuickNotes

This command sets up a new Expo project using the latest CLI tools. It’s designed to work smoothly with Node 17+ and provides you with several template options (for both managed and bare workflows).

Choose a Template: When prompted to choose a template, you’ll see options like:

• Managed Workflow:

  • blank: A minimal app as clean as an empty canvas.

  • blank (TypeScript): Same as blank but pre-configured with TypeScript.

  • tabs (TypeScript): A sample app with multiple screens and navigation built in.

• Bare Workflow:

  • minimal: A minimal bare-bones project that gives you full control over native code.

Choose the template that best fits your needs. For most developers starting a new project, the managed workflow (blank or blank with TypeScript) is ideal.

Okayyyy... so I'm still stuck needing a React Native project, and I've just found out that the next tutorial which tells me to run expo init QucikNotes is out of date too. Now I need to delete my new QuickNotes folder and try re-creating it with npx create-expo-app QuickNotes. I sure hope my npx is up to date!

I ran npx create-expo-app QuickNotes. It asked to download the package create-expo-app. I said yes, and everything ran smoothly. The new project was created.

By now, I've almost forgotten was I was trying to do. (Run eas init on a project.) I move into my new project's directory and run eas init. I'm asked if I would like to create a new project, and I say yes. And it completes! Yay!

Step 4: Set Up Your EAS Profile

Hm. At this point, I don’t know if I need to follow this step. Maybe? I decide to follow it. I run eas build:configure. It asks me what platforms I want to configure. I say “All” (why not?), and it creates a file “eas.json” that has a configuration in it. Do I know what it means? Not yet. I’m sure I’ll discover that later! I’m also told :

- Run eas build when you are ready to create your first build.

- Once the build is completed, run eas submit to upload the app to app stores.

- Learn more about other capabilities of EAS Build: https://docs.expo.dev/build/introduction
That sounds helpful. I better note that down.

I completed the tutorial. Yay! This was such a short tutorial, and yet I ran into several problems. That’s typical when following tutorials. It’s always an adventure!

What Did I Learn?

• Expo is a framework that is used to start new React Native projects.

• To start a new React Native project using Expo the best command for me to run is npx create-expo-app MyBeautifulNewApp.

• I’m looking forward to actually making the QuickNotes app!