Skip to main content
Version: 0.12

Development Environments

We set configured Okteto CLI with Okteto Cloud in the previous section. In this section, let's do the fun bits of developing our application in our Development Environment.

One Command To Rule Them All​

As part of this guide, we'll be fixing a bug in our sample Movies application. The application consists of a React frontend and a Node.js backend API. The frontend uses the REST endpoints of the backend API and loads two different lists of movies based on its response. Ideally, the application should look like this:

UI showing the movies app

But there is a bug in the backend we need to fix to get to this state 🙂

We'll be using two different versions of this Movies application to demonstrate this - one which uses Helm charts, and the other which has a Docker compose file configured.

$ git clone https://github.com/okteto/movies-with-compose
$ cd movies-with-compose
$ okteto up

Since we already have a Docker compose file, on running okteto up you should directly see a prompt asking you which one of your microservices you want to develop:

  ✓  Development container 'api' configured successfully
  ✓  Development container 'frontend' configured successfully
    Select the development container you want to activate:
    Use the arrow keys to navigate: ↓ ↑ → ←
  ▸ api
    frontend

The Movies app only has the api and frontent microservices, which we see in the prompt. Let's go with api because we know there's a bug there we need to fix 🙂

Once you do that, you should see Okteto CLI building the required Docker images for your microservices. When it is done building the images, it will start deploying your application to Okteto Cloud. You should see the deployed endpoints as part of the output in the CLI:

Success! Your application will be available shortly.
i  Endpoints available:
  - https://movies-with-helm-cindylopez.cloud.okteto.net/
  - https://movies-with-helm-cindylopez.cloud.okteto.net/api

You should be able to view your application when you visit these endpoints. The first endpoint serves the UI for our application, while the second one has the backend API deployed. These endpoints are also shown in the Okteto Cloud dashboard:

UI showing the movies app

The next time you run okteto up, you'll not see all the steps related to the initial setup and will be directly prompted to choose which microservice you want to develop. Behind the scenes, the Dev Environment will synchronize your changes everytime you save them.

Development Time!​

Visiting the frontend endpoint for the Movies app, something doesn't look right here, does it?

UI showing the movies app

The list of movies is the same as Cindy's list. Let's fix that.

Open your favorite IDE on your local machine and edit line 43 in /api/server.js to:

  db.collection('watching').find().toArray( (err, results) =>{

Now save your changes and go back and refresh the browser. Okteto CLI will automatically synchronize your changes to your development container. Take a look at the development container shell and notice how the changes are detected by nodemon and automatically hot reloaded.

[nodemon] restarting due to changes...
[nodemon] starting `node server.js`
Server running on port 8080.

See the magic?

UI showing the movies app

Okteto's Development Environment allowed the changes you made to your code locally to reflect immediately on the deployed version of your application. Gone are the troubles of committing and waiting for long CI builds to see how your changes would look in production!

Next Steps​

Congratulations! You successfully developed your first application in a Remote Development Environment.

In this Getting Started guide, we learned how to install Okteto CLI and configure it with Okteto Cloud. Then we saw how you could launch a Development Environment just using a single command: okteto up. After that, we fixed a bug in our Movies application using the Dev Environment we had spun up.

From here, we recommend the following next steps:

  • Try launching a Dev Environment for your own application following similar steps to what we saw in this guide.
  • If you want to know more things Okteto can help you with, have a look at our Preview Environments.