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.
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:
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 modeworkdir
: the working dir of the commandcommand
: the command to start the frontend service locallyreverse
: 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.