Does this Docker configuration successfully set up a React.js build to run on port 5000?

Recently, I encountered an issue with my React.js app after dockerizing it. Everything was running smoothly until I updated the node version to 17 and began experiencing errors. To resolve this, I reverted back to using node version 16 in my docker image. However, ever since making this change, I have been unable to run the docker image on the specified port.

Below is the content of my dockerfile:

ROM node:16.10-alpine as build

RUN mkdir /app

WORKDIR /app

COPY /front-end/dashboard/package.json /app

RUN npm install

COPY ./front-end/dashboard /app

RUN npm run build

# Install `serve` to run the application.
RUN npm install -g serve

# Set the command to start the node server.
CMD serve -s -n build

# Inform Docker about the port we'll be utilizing.
EXPOSE 5000

Despite setting up a build and attempting to serve it on port 5000, I am now encountering difficulties which were not present before.

The output displayed in docker indicates:

Serving! │

│ │

│ - Local: http://localhost:3000 │

│ - On Your Network:

Upon accessing localhost:3000, there are no signs of activity even though the intended functioning port should be 5000. Unfortunately, I am unable to run the docker image's build on port 5000 as previously achieved. Any insights into why the build now fails to run on port 5000?

My attempt at resolving the issue by executing 'docker run -p 5000:5000' has proven unsuccessful.

Answer №1

Encountering a similar problem at my workplace led me to delve deep into our company's deployment pipeline, where I eventually pinpointed the source of the issue...

The culprit was the serve package.

It came to light that they had altered the default port from 5000 to 3000.
Source: serve github releases

To resolve this issue, my suggestion is to include -l 5000 in your serve command.

Answer №2

After reviewing the logs, it appears that your application may be configured to listen for traffic on localhost:3000. The EXPOSE 5000 line in your Dockerfile doesn't alter this behavior, but it indicates to Docker and other users that port 5000 is significant. Since there is no listener on port 3000, a 'connection refused' error is expected. For more information, refer to https://docs.docker.com/engine/reference/builder/#expose

To resolve this issue:

  • Make sure your dockerized process is listening on 0.0.0.0:5000. To achieve this, add -l tcp://0.0.0.0:5000 to your CMD line (refer to https://github.com/vercel/serve/blob/main/bin/serve.js#L117)

  • When running the container, ensure you expose the port by using docker run -p 5000:5000 ...

  • If necessary, adjust your docker host's firewall settings to allow traffic to <ip>:5000

Upon connecting to http://<ip>:5000, you should now see the application's response.

Answer №3

Your application is up and running on port 3000. To access it, you'll need to map the desired port from your host machine to port 3000. For example, if you want to use port 5000, you should run -p 5000:3000. After doing this, you can reach your application by simply typing localhost:5000 in your browser.

It's important to remember that containers operate as independent machines separate from the host. So when a container indicates it's listening on localhost:3000, it's referring to localhost within the container itself, not on the host machine.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The proper way to close file descriptors on a terminated HTTP connection in a Node.js environment

I am currently experimenting with Node.js, where I am attempting to stream files from the filesystem over HTTP. However, my experience on an OS X Lion machine has been hindered by a buggy Apache Bench (ab) app that prematurely aborts connections. This issu ...

Reactjs - There was an error: $node.attr(...).tooltip is not defined

I am currently troubleshooting the SummerNote mention library and encountering an issue - Uncaught TypeError: $node.attr(...).tooltip is not a function The versions I am using are: - "react-summernote": "^2.0.0", - React version: "react": "^16.8.6", ...

Retrieving information from the API to populate a child component in Next.js

I have been developing a header component and here's the code snippet: import style from '../../styles/header.css'; import '../../styles/globals.css'; export default function Header({data}){ const [showMe, setShowMe] = useStat ...

Preserving intricate nesting in a Mongoose schema

I've encountered a problem when trying to save nested subdocuments - I'm not certain if it's because they're not in an array or some other reason. The docs suggest that nested objects should be auto-saved, but that doesn't seem to ...

Is there a way for me to view the output of my TypeScript code in an HTML document?

This is my HTML *all the code has been modified <div class="testCenter"> <h1>{{changed()}}</h1> </div> This is my .ts code I am unsure about the functionality of the changed() function import { Component, OnInit } f ...

Terminate the bash script if there is a failure during the React build process

I am facing an issue with some deployments that are breaking production due to the bash script continuing even if the build fails. Is there a way to ensure that the script stops running if npm run build fails? #!/usr/bin/env bash source .env ENVIRONMENT= ...

Converting Epoch timestamp to AM/PM format in a React render function

I am currently working on a personal project using React.js. I have successfully fetched an API, and one of the values returned is an Epoch timestamp. My goal is to display this timestamp in a human-readable format such as am/pm. The Epoch timestamp is dis ...

Constructing an Http Post URL with form parameters using the Axios HTTP client

I need assistance in creating a postHTTP request with form parameters using axios on my node server. I have successfully implemented the Java code for constructing a URL, as shown below: JAVA CODE: HttpPost post = new HttpPost(UriBuilder.fromUri (getPro ...

Using the 'a' flag in fs.openSync() in Node.js will result in failure to create a file that does not already exist

I'm looking to develop a log module for my app that will automatically create a new file based on the time it is initialized (when the init function in the module is called). However, I keep encountering an error when trying to create the new log fil ...

Optimizing Materialize-css, Laravel, and VueJS integration: best practices for setting up modals, side-nav, and

Currently, I am in the process of constructing a website utilizing Laravel 5.4, Laravel Mix, VueJS, and Materialize-css. Fortunately, VueJS and jQuery are already integrated with Laravel, so no additional setup is required in that regard. All custom compo ...

Error encountered while running the command "npm start" for a

** Visual Studio 2022 Developer Command Prompt v17.0.0 ** Copyright (c) 2022 Microsoft Corporation C:\Users\johndoe\Desktop\project1\create-react-app\docusaurus\website>npm start @ start C:\Users\johndoe&bso ...

The route in my Node.js Express application appears to be malfunctioning

I am facing an issue with my app.js and route file configuration. Here is my app.js file: const express = require('express'); const app = express(); const port = process.env.PORT || 8080; const userRoute = require('./routes/user.route' ...

Achieve background color filling in ant-design charts based on y-axis value conditions

Currently, I am utilizing ant-design charts to visualize data retrieved from Django in React. My objective is to assign background colors based on the y-axis values. For example, I aim to have the background color range of 15-18 as red, 18-20 as yellow, an ...

Tips for locating the specific website address on a publicly accessible webpage

I am looking to receive notifications whenever a company's public website adds a document to their site. This needs to be done for approximately 400 different public sites. Since each site will have a unique document directory, I plan to create a data ...

Connect this - initiate the removal of an item

I am seeking assistance from more experienced colleagues to help me understand the code below and implement it in my App. The main objective is to trigger a REDUX action from a button, which will delete an item from a database. Here is the code that curr ...

Error with the login component in React.js (codesandbox link included)

Hey there! I'm a beginner programmer and I recently dove into a tutorial on creating a Login Form. However, I've run into a few issues along the way. Overview of My Project: The login form I'm working on was built using create-react-app. T ...

A guide to storing data externally by utilizing the useReducer() function

While working on an application with a complex data model, I found that useReducer() is a suitable choice. Instead of sharing my original code, I will be referring to the example from React docs and explaining the modifications I intend to make. Consider ...

Images appear as plain text in the preview of VUE 3 (with TypeScript)

Currently, I am developing a Portfolio website and have encountered an issue. While everything runs smoothly with npm run dev, the problem arises when I use npm run preview. In this scenario, some of the images within the files named 3dModellingFiles.ts do ...

Create PDFs using PhantomJS when the HTML content is fully loaded and ready

I am a newcomer to utilizing phantomjs and encountering difficulties in rendering my website as a PDF file. Although I can successfully render a simple version of the page, issues arise when multiple images and web fonts are involved, causing the DOM not t ...

Error: The operation 'join' cannot be performed on an undefined value within Fast2sms

I am encountering issues while attempting to send SMS using fast2sms in Node.js. The error message reads as follows: TypeError: Cannot read property 'join' of undefined at Object.sendMessage (C:\Users\user\Desktop\node_module ...