0

The Dockerfile for my React client:

FROM node:10

WORKDIR /app/client

COPY ["package.json", "package-lock.json", "./"]

RUN npm install --production

COPY . .

EXPOSE 3000

CMD ["npm", "start"]

The Dockerfile for my Express backend:

FROM node:10

WORKDIR /app/server

COPY ["package.json", "package-lock.json", "./"]
RUN ls
RUN npm install --production

COPY . .

EXPOSE 5000

CMD ["node", "server.js"]

My docker-compose.yml file in my project's root:

version: '3'

services:
  backend:
    build:
      context: ./backend
      dockerfile: ./Dockerfile
    image: "isaacasante/mcm-backend"
    ports:
      - "5000:5000"
  frontend:
    build:
      context: ./client
      dockerfile: ./Dockerfile
    image: "isaacasante/mcm-client"
    ports:
      - "3000:3000"
    links:
      - "backend"

My server.js file under my backend folder:

var express = require("express");
var cors = require("cors");
var app = express();
var path = require("path");

// Enable CORS and handle JSON requests
app.use(cors());
app.use(express.json());

app.post("/", function (req, res, next) {
  // console.log(req.body);
  res.json({ msg: "This is CORS-enabled for all origins!" });
});

// Set router for email notifications
const mailRouter = require("./routers/mail");
const readerRouter = require("./routers/reader");
const notificationsRouter = require("./routers/booking-notifications");
app.use("/email", mailRouter);
app.use("/reader", readerRouter);
app.use("/notifications", notificationsRouter);

if (process.env.NODE_ENV === "production") {
  app.use(express.static("mcm-app/build"));
  app.get("*", (req, res) => {
    res.sendFile(path.join(__dirname, "mcm-app", "build", "index.html"));
  });
}

app.listen(5000, function () {
  console.log("server starting...");
});

When I run:

docker-compose up

I get the following output in my terminal:

$ docker-compose up
Starting mcm_fyp_backend_1 ... done
Starting mcm_fyp_frontend_1 ... done
Attaching to mcm_fyp_backend_1, mcm_fyp_frontend_1
backend_1   | server starting...
frontend_1  |
frontend_1  | > [email protected] start /app/client
frontend_1  | > react-scripts start
frontend_1  |
frontend_1  | ? ?wds?: Project is running at http://172.18.0.3/
frontend_1  | ? ?wds?: webpack output is served from
frontend_1  | ? ?wds?: Content not from webpack is served from /app/client/public
frontend_1  | ? ?wds?: 404s will fallback to /
frontend_1  | Starting the development server...
frontend_1  |
mcm_fyp_frontend_1 exited with code 0

My backend exits with code 0, and I can't load my app. My backend is running though.

What am I doing wrong, and how can I get my React-Express-Node app running with Docker Compose?

3
  • The backend application shouldn't be running react-scripts start. Have you included the complete setup code here? (For example, are there volumes: in your local setup that aren't in the docker-compose.yml you've shown here?) Commented Feb 15, 2021 at 17:38
  • @DavidMaze Yeah, I was thinking same about react-scripts start, but I guess this is because I'm copying my package.json file for both my client and backend into /app through my different Dockerfiles, right? How can I avoid that? Commented Feb 15, 2021 at 17:45
  • @DavidMaze Also, I am not using any volumes. The above code is the full code for the files I've included. Sorry for omitting the question you asked in my earlier reply. Commented Feb 15, 2021 at 17:48

1 Answer 1

1

I found the solution to prevent my frontend service from exiting with 0. I had to add tty: true for it in my docker-compose.yml file. Also, to make the frontend-backend interaction work as expected in the app, I had to change my proxy command in my client's package.json to the following:

"proxy": "http://backend:5000"

And I changed my links command in my docker-compose.yml to this:

links:
  - "backend:be"

After rebuilding, everything is working as intended.

Sign up to request clarification or add additional context in comments.

1 Comment

where exactly we need to add tty: true

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.