Getting Started with Hybrid Mode for Frontend Development

This tutorial will show you how to develop a sample Frontend application using Okteto Hybrid Mode.

Prerequisites

Install the latest version of the Okteto CLI and configure it to access Okteto. Follow our installation guide if you haven't done so yet.

Step 1: Deploy the Sample App

Get a local version of the Sample App by executing the following commands:

git clone https://github.com/okteto/movies-with-helm
cd movies-with-helm

Checkout the branch with the Hybrid Mode configuration:

git checkout hybrid

At the root of the directory, you'll find the okteto.yml file. This file describes how to deploy the Sample App.

okteto.yml

deploy:
  - helm upgrade --install movies chart
    --set api.image=${OKTETO_BUILD_API_IMAGE}
    --set frontend.image=${OKTETO_BUILD_FRONTEND_IMAGE}

The Sample App consists of the following services:

• A React based front-end, using webpack as bundler and hot-reload server for development.
• A very simple Node.js API using Express.
• A MongoDB database.

Deploy the Sample App by executing:

okteto deploy

 i  Using cindy @ okteto.example.com as context
 i  Running 'helm upgrade --install movies chart --set api.image=${OKTETO_BUILD_API_IMAGE} --set frontend.image=${OKTETO_BUILD_FRONTEND_IMAGE}'
...
 ✓  Development environment 'movies-with-helm' successfully deployed
 i  Endpoints available:
  - https://movies-cindy.okteto.example.dev
  - https://movies-cindy.okteto.example.dev/api

Step 2: Activate your Development Container

The dev section defines how to activate a Development Container for the Sample App:

okteto.yml

dev:
  frontend:
    mode: hybrid
    workdir: frontend
    command: bash
    reverse:
      - 80:80

The frontend key matches the name of the frontend Deployment. The definition of the rest of fields are:

• mode: to configure Hybrid development mode
• workdir: the working dir of the command
• command: the command to start the frontend service locally
• reverse: to expose the local port 80 in the Development Container port 80 using a reverse tunnel

Next, execute the following command to activate your Development Container:

okteto up frontend

 i  Using cindy @ okteto.example.com as context
 i  Development environment 'microservices-demo' already deployed.
 ✓  Reverse tunnel configured
    Context:   okteto.example.com
    Namespace: cindy
    Name:      frontend
    Reverse:   80 <- 80

bash-3.2$

You can run yarn install + yarn start to start the frontend service locally. Your local process will be still available from its okteto endpoint because the local port 80 is accessible via a reverse tunnel to the cluster.