Tutorial: Expo & ExpressJS

This tutorial is about how to run a Expo app on host machine's local environment and ExpressJS app on virtual machine's local environment using bolt. Below's the video showing how to run this tutorial.

Objectives
Project Structure
Initialising the project using Bolt
Adding expo app as a Bolt Service
Running the Project
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/
╰─➤ services/
  ╰─➤ apis/
    ╰─➤ express-generator files...
    ╰─➤ bolt.service.yaml
  ╰─➤ expo/
    ╰─➤ expo-generator files...
    ╰─➤ bolt.service.yaml
╰─➤ .boltignore
╰─➤ .env
╰─➤ .env.tpl
╰─➤ bolt.yaml
╰─➤ 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-express-apis
$ bolt init

It has created a bolt.yaml file in our project's root directory.

envfile: .env.tpl
project_id: "1690963931562"
project_name: expo-express-apis
services: null
ingress: null

Adding expo app as a Bolt Service

Now, in order to add expo & apis service as a service in bolt we have executed the following command:

$ bolt service:add expo services/expo
Creating app in service
Scanning source code
Detected Expo app
Installed expo service in ./services/expo
Verifying metadata for other services..
Metadata verified

$ bolt service:add apis services/apis
Creating app in service
Scanning source code
Detected Express.js app
Installed apis service in ./services/expo
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 all our available services
envfile: .env.tpl
project_id: "1690963931562"
project_name: expo-express-apis
services:
  expo:
    path: services/expo
  apis:
    path: services/apis
ingress: null

# This is how service/bolt.service.yaml looks for expo
container_name: expo
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}

# This is how service/bolt.service.yaml looks for apis
container_name: apis
stateless: true
default_service_runner: local
service_discovery_offset:
  - 3000
supported_service_runners:
  - local
  - docker
service_runners:
  local:
    envfile: .env
    build: npm install && npm run start
    ports:
      - ${ASSIGNED_PORT}:${ASSIGNED_PORT}
  docker:
    envfile: .env
    build: ./run.Dockerfile
    ports:
      - ${ASSIGNED_PORT}:${ASSIGNED_PORT}

Running the Project

Now, let's run our services using Bolt.

# The following command will run the service as per the configuration in bolt.yaml file
$ bolt up

...

"expo" service is up on local platform
"apis" 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:

expo service at http://localhost:19006
apis service at http://localhost:3000

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 │ expo         │ up     │ local          │ 19000 │ 39418     ║
║   │              │        │                │ 19006 │           ║
╟───┼──────────────┼────────┼────────────────┼───────┼───────────╢
║ 2 │ apis         │ up     │ local          │ 3000  │ 39420     ║
╚═══╧══════════════╧════════╧════════════════╧═══════╧═══════════╝

Monitoring Service Logs

To monitor logs, use the following commands:

# For Expo Service
$ bolt log expo
# For APIs Service
$ bolt log apis

To keep monitoring logs in live mode, use the following command:

# For Expo Service
$ bolt log --follow expo
# For Express Service
$ bolt log --follow apis

Stopping Your Project

To stop your project, you can run the following command:

$ bolt down
>> Stopping expo...
>> Stopping apis...

...

"expo" is down from local platform
"apis" is down from local platform

Repo Link

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

Up next

Next MoleculerJS Postgres PGAdmin

Go back

Laravel Auth & MySQL