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.
Clone this repository and go to the react-kubectl folder:
git clone https://github.com/okteto/samples
Run the Movies App by executing:
kubectl apply -f manifests
Wait a minute or so for the application to be running.
In order to activate your Cloud Native Development, execute:
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 from the
Run parcel dev server.
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!
Alternatively you can access the remote shell by executing, from the
okteto exec bash
And then work just like you do in local:
review okteto’s usage guide to see other commands available to help you speed you up your development.
okteto up command by pressing
ctrl + c and run the following command to deactivate the cloud native environment:
Run the following command to remove the resources created by this guide:
kubectl delete -f manifests