Tutorial: Expo App

This tutorial is about how to run a Expo app using bolt. Below's the video showing how to run this tutorial.

Table of Contents

  • Objectives
  • Project Structure
  • Initialising the project using Bolt
  • Adding expo app as a Bolt Service
  • Running the Project
  • Running the Project on Local
  • Listing Bolt Services
  • Monitoring Service Logs
  • Stopping Your Project
  • Repo Link

Objectives

Here we have an expo app created using expo init and we will be running it using bolt.
Our Main objectives are:
  • Run this project using bolt in local machine.

Project Structure

The project structure of our app is as follows:
# Below's the directory structure of our project.
expo-app/
╰─➤ expo-files...
╰─➤ .env
╰─➤ .env.tpl
╰─➤ bolt.service.yaml
╰─➤ bolt.yaml
╰─➤ .gitignore
╰─➤ Readme.md

Initialising the project using Bolt

At first we have initialised the project by running bolt init command to create bolt.yaml file.
$ cd expo-app
$ bolt init
It has created a bolt.yaml file in our project's root directory.
envfile: .env.tpl
project_id: "1690962366769"
project_name: expo-app
services: null
ingress: null

Adding expo app as a Bolt Service

Now, in order to add service as a service in bolt we have executed the following command:
$ bolt service:add expoweb .
Creating app in service
Scanning source code
Detected Node.js app
Installed web service in .
Verifying metadata for other services..
Metadata verified
Bolt service:add command runs and automatically detects the type of service you are using and creates a bolt.service.yaml template init & includes the same into your bolt.yaml file.
# This is how bolt.yaml file looks after adding service as a service
envfile: .env.tpl
project_id: "1690962366769"
project_name: expo-app
services:
expoweb:
path: services/expo-web
ingress: null
# This is how service/bolt.service.yaml looks
container_name: expoweb
stateless: true
default_service_runner: local
service_discovery_offset:
- 19000
- 19006
supported_service_runners:
- local
service_runners:
local:
envfile: .env
build: npm install && npm run web
ports:
- ${ASSIGNED_PORT}:${ASSIGNED_PORT}
- ${ASSIGNED_PORT_1}:${ASSIGNED_PORT_1}

Running the Project

Now, let's run our service using Bolt.
# The following command will run the service as per the configuration in bolt.yaml file
$ bolt up
...
"expoweb" service is up on local platform
By default, the configuration in bolt.yaml file is to run the project on local machine.
You can now access service at http://localhost:19006.

Running the Project on Local

Inorder to run the service in local when you run bolt up command you need to change the default_service_runner in bolt.yaml file to local.
# This is how bolt.service.yaml file should look like if you want to run the service on local
container_name: expoweb
stateless: true
default_service_runner: local
service_discovery_offset:
- 19000
- 19006
supported_service_runners:
- local
service_runners:
local:
envfile: .env
build: npm install && npm run web
ports:
- ${ASSIGNED_PORT}:${ASSIGNED_PORT}
- ${ASSIGNED_PORT_1}:${ASSIGNED_PORT_1}
Now if you run bolt up command it will run the service on local.

Listing Bolt Services

You can also see the list of services in your bolt project and their statuses using the service:list command.
$ bolt service:list
╔═══╤══════════════╤════════╤════════════════╤═══════╤═══════════╗
# │ Service Name │ Status │ Service Runner │ Port │ ProcessId ║
╟───┼──────────────┼────────┼────────────────┼───────┼───────────╢
1 │ expoweb │ up │ local1900039151
║ │ │ │ │ 19006 │ ║
╚═══╧══════════════╧════════╧════════════════╧═══════╧═══════════╝

Monitoring Service Logs

To monitor logs, use the following command:
$ bolt log web
To keep monitoring logs in live mode, use the following command:
$ bolt log --follow expoweb

Stopping Your Project

To stop your project, you can run the following command:
$ bolt down
>> Stopping expo-app...
"expoweb" is down from local platform
>> expo-app is down.

Repo Link

To clone the project you can use bolt-framework-tutorial-apps/examples/expo-app