React Movies App using Okteto

This example uses a demo video streaming application to show you how to build a React front-end with Okteto. It’s configured to work on a cloud native development environment and prepared to be deployed using raw kubernetes manifests.

This example works in any kubernetes cluster. Cloud Native Development provides more value in remote kubernetes clusters, but in order to make it simple to follow this guide, we recommend to use Docker for Mac (with Kubernetes support) or minikube.

Deploy the Movies React App

Clone this repository and go to the react-kubectl folder:

1
2
git clone https://github.com/okteto/samples
cd samples/react-kubectl

Run the Movies App by executing:

1
kubectl apply -f manifests

Wait a minute or so for the application to be running.

Develop as a Cloud Native Developer

In order to activate your Cloud Native Development, execute:

1
2
cd movies
okteto up

The okteto up command will start a remote development environment that automatically synchronizes and applies your code changes without rebuilding containers (eliminating the docker build/push/pull/redeploy cycle). The environment already includes the react dev tools, and will automatically forward port 9000 and 9001 to your local machine.

This example uses Parcel to bundle the application and enable Hot Module Replacement to automatically update modules in the browser at runtime without needing a whole page refresh. The development environment is already configured to use it.

With okteto we can bring this development experience to the cluster with the same flow you would have in local. Just run the command below:

1
yarn start

This will launch parcel with its development server in the remote container. Open your browser and go to http://localhost:9000 to see the application.

You can now edit the file src/App.jsx and change the Movies text in line 22 to Okteflix. Save your changes.

Go back to the browser, and cool! Your changes are automatically live with no need to refresh your browser!

Cleanup

Cancel the okteto up command by pressing ctrl + c and ctrl + d and run the following command to deactivate the cloud native environment:

1
okteto down

Run the following command to remove the resources created by this guide:

1
kubectl delete -f manifests