DEV Community

Cover image for Complete guide to deploy a simple full stack application in Docker
SagarTrimukhe
SagarTrimukhe

Posted on

Complete guide to deploy a simple full stack application in Docker

Table of contents

Creating a simple TODO app using React.

We will be using create-react-app to quickly setup a react application with basic dependencies installed.

Command to create the app

npx create-react-app frontend
Enter fullscreen mode Exit fullscreen mode

This will create folder named frontend containing all the basic files with dependencies installed.

Two more dependencies are required:

  1. axios : To make API calls. fetch call also be used.
  2. uuid : To generate random IDs for todo tasks.

commands to install the above

npm install --save axios
npm install --save uuid
Enter fullscreen mode Exit fullscreen mode

Below is the simple UI code which has

  1. A text input box to take the task name.
  2. A "Add" button to add new tasks.
  3. List of previously created tasks with "Delete" button to delete the tasks.

This is how it will look (No fancy colors or animations)
image

API handlers are maintained in a separate file.

Creating a server using Express.js

Let's start with a folder creation named backend.

  1. cd into the folder
    cd backend

  2. Run "npm init" command to create a package.json file

  3. When the above command is ran, it will ask for few details. All can be skipped by hitting enter.

  4. Run "npm install --save express" to install the express js dependency.

  5. By default the entry point of the application will be pointing to "index.js". It can be changed by editing the package.json file
    "main": "your_file_name.js"

  6. Create a file index.js (or your_file_name.js)

  7. Following is the simple express js code with 3 APIs.

It has
a. GET /tasks endpoint to get the list of tasks.
b. POST /tasks to create a new task.
c. DELETE /tasks to delete a task.

All the tasks are stored in-memory. The tasks data will be lost as soon the server is stopped.
(So, NOT exactly a FULL STACK application)

To start the server run following command

node index.js
Enter fullscreen mode Exit fullscreen mode

You can test APIs using a REST Client like Postman or simple CURL commands.

Connecting frontend and backend.

Even though the correct endpoints are mentioned in UI, it will not be able to reach the backend APIs due to CORS.

To solve this we need to use a proxy.
It is very simple to proxy the calls by just updating the UI package.json file.

Add the below configuration.

 "proxy": "http://localhost:4000"
Enter fullscreen mode Exit fullscreen mode

Now the UI should be able to connect to backend APIs.

Generating the UI bundle and serving it through express.

Generating production UI bundle is dead simple
Run the below command.

npm run build
Enter fullscreen mode Exit fullscreen mode

This is will create a folder named build in your frontend root directory containing index.html file along with JavaScript and CSS files.

This can be served using a static server like "serve" package.

BUT, the UI will not be able to reach backend servers.
BECAUSE, proxy feature is available only in development mode.

To solve this issue, we can serve the UI using same express server. YES you read it right. a single server to server both frontend and backend.

To do so,

  1. Copy the build folder to backend folder
  2. Add the following line in index.js file
app.use(express.static('build'));
Enter fullscreen mode Exit fullscreen mode

We can give the absolute path also, just keeping it simple here :)

Now start the express server. At '/' path the UI will be served and at other paths, the APIs will be available.

Deploying the application in a container.

Till now we have developed and deployed the application on local machine.

If you are a docker guy, then we can quickly deploy this application in a container as well.

  • Create a Dockerfile. Dockerfile is a simple text file containing all the commands to create a docker image. The following is a docker file which uses alpine OS as a base image and exposes the port 4000.
  • Create a docker image Run the command to build the image
docker image build -t todoapp:1.0 .
Enter fullscreen mode Exit fullscreen mode
  • Start the container Once the image is created, next step is to create a container. Run the command to create and start the container.
docker container run -d -p 8000:4000 todoapp:1.0
Enter fullscreen mode Exit fullscreen mode
  1. If the docker is running on a VM then the application can be accessed at VM-IP-Address:8000 eg. http://192.168.43.18:8000

Complete project is available at: https://github.com/SagarTrimukhe/todo-app

Discussion (0)