The main challenge with the previous section was that you had a user interface service self-contained as a running container. The API service, on the other hand, was off doing its own thing. The next tool that you'll learn how to use is docker-compose. As the name suggests, docker-compose is how you compose larger applications out of smaller services. The next natural step for Barely SMS is to use this Docker tool to make the API service and to control both services as one application.

This time, we'll need two Dockerfile files. You can reuse the Dockerfile from the preceding section—just rename it to Dockerfile.ui. Then, create another Dockerfile that's nearly identical—call it Dockerfile.api and give it the following contents:

FROM node:alpine
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3001
CMD [ "npm", "run", "api" ]

The two differences are the EXPOSE port value and the CMD that is run. This command starts the API server instead of the React development server.

Before you build the images, the server.js and package.js files need minor adjustments. In package.json, the proxy can simply point to http://api:3001. In server.js, make sure that you're no longer passing a specific IP address to listen():

app.listen(3001, () => 
  console.log('API server listening on port 3001!') 
); 

Building the two images requires a slight modification as well because you're no longer using the standard name for the Dockerfile. Here's how to build the UI image:

docker build -f Dockerfile.ui -t barely-sms-ui . 

Then, build the API image:

docker build -f Dockerfile.api -t barely-sms-api .

At this point, you're ready to create a docker-compose.yml. This is how you declare what the docker-compose tool should do when invoked. Here's what it looks like:

api:
  image: barely-sms-api
  expose:
    - 3001
  ports:
    - "3001:3001"
    
ui:
  image: barely-sms-ui
  expose:
    - 3000
  links:
    - api
  ports:
    - "3000:3000"

As you can see, this YAML markup is clearly separated into two services. First there's the api service, which points to the barely-sms-api image and maps ports accordingly. Then, there's the ui service, which does the same thing except that it points to the barely-sms-ui image and maps to different ports. It also links to the API service because you want to make sure that the API service is available before the UI is loaded in any browser.

To bring the services up, you can run the following command:

docker-compose up

You should then see logs from bother services in your console. Then, if you visit http://localhost:3000/, you should be able to use Barely SMS as you normally would, except this time, everything is self-contained. From this point forward, you're in a better position to grow your application as the requirements evolve. As necessary, you can add new services and have your React components talk to them like they're all talking to the same application while keeping the services modular and self-contained.