SETUP.md

Setup

Node, CLI & IDE

In this workshop, you'll have to install:

• node (at least version 10): JavaScript runtime
• npm: node package manager
• ESlint VSCode extension
• Expo Client on your phone:
  • Apple
  • Android

To install node:

• Fedora: sudo dnf install nodejs -y
• Ubuntu: sudo apt install nodejs npm -y

If your distro is too old, node default version from your package manager might be under 10, you'll have to install node via nvm

Then Expo CLI: sudo npm install -g expo-cli

Project setup

First off, create your project with the CLI:

npx create-expo-app -t tabs expo-workshop-poc && cd expo-workshop-poc && npm install axios

It will create a basic repo based on a template with several pages.

The architecture of the project looks like this:

expo-workshop-poc
├── app.json           <-- config file
├── App.tsx            <-- app entrypoint, equivalent to a main
├── assets             <-- assets folder (font, images...)
├── babel.config.js    <-- config file
├── components         <-- component folder (react notion)
├── constants          <-- useful variables (color palette, phone dimensions...)
├── hooks              <-- hooks folder (react notion)
├── navigation         <-- pages organization and configuration folder
├── node_modules       <-- dependencies folder
├── package.json       <-- node file that define dependencies, rules and commands
├── package-lock.json  <-- dependencies specifications
├── screens            <-- screen components folder
├── tsconfig.json      <-- compilation options
└── types.tsx          <-- typescript types

All you have to do after that is opening the expo-workshop-poc folder in VSCode and run npm start inside.

This should start the dev server and print a QR code in your terminal. Scan it with your phone (from the expo app on Android or directly from the camera on iPhones). You can test it and what (simple) features are available.

If you have an error on your phone when scanning the QR code, run npm install @expo/ngrok@^4.1.0 and replace the start script content in the package.json with expo-cli start --tunnel. Run npm start again and everything should work fine 😉

If it loads the app on your phone then shows a basic app with a bottom navigator and 2 tabs, then you can start the exercises!

Go back to the exercises