Connecting to React docker container on port 80 - reactjs

I'm trying to deploy a React app as part of a docker compose. It works fine if I deploy on port 3000, but when I use port 80, I cannot connect. If I run npm start manually, either config works fine, but I cannot access the port 80 version when running as a docker image.
I've tried adding EXPOSE 80 to the dockerfile, but it did not seem to have any effect. Can someone point out the error in my config?
Dockerfile:
FROM node:17-alpine
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./
RUN npm install
RUN npm install react-scripts#5.0.0 -g
COPY . .
CMD ["npm", "start"]
docker-compose.yaml
version: "3.8"
services:
solvle:
build: ./
container_name: solvle_c
ports:
- '8081:8081'
solvle_front:
build: ./solvle-front
container_name: solvle_front_c
ports:
- '80:80'
stdin_open: true
tty: true
package.json fragment
"scripts": {
"start": "set PORT=80 && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

For linux you should set port in this way:
"start": "export PORT=80 && react-scripts start"
Another solution is create a file with name .env (documentation) in the main directory and set PORT variable to desired port number:
PORT=80
One more solution.
You could use cross-env to set the port:
npm install cross-env -D
and then modify start script package.json:
"start": "cross-env PORT=80 react-scripts start",
p.s.
But for deploy react app with docker I woud recomend you to use nginx.
p.p.s.
The EXPOSE instruction in dockerfile does not actually publish the port. It functions as a type of documentation. expose documentation

Related

facing issue to start react application npm start error

when I issue below command to start react app facing this error, can anyone help.
npm start
react_template#0.1.0 start
env-cmd -f .env.dev craco start
'env-cmd' is not recognized as an internal or external command,
operable program or batch file.
Did you install cross-env with npm? Try running
npm install
This should work.
its really hard to tell without taking a look at your package.json file. but i see that you're using env-cmd package which provides custom run and build commands and lets you have multiple environment declarations.
here is an example of what you can do with it in your package.json (this example is a nextjs example)
"scripts": {
"dev": "env-cmd -f env/.env.local next dev",
"build:pre": "env-cmd -f env/.env.pre next build",
"start:pre": "env-cmd -f env/.env.pre next start",
"build:stg": "env-cmd -f env/.env.stg next build",
"start:stg": "env-cmd -f env/.env.stg next start",
"build:rc": "env-cmd -f env/.env.rc next build",
"start:rc": "env-cmd -f env/.env.rc next start",
"build:prod": "env-cmd -f env/.env.prod next build",
"start:prod": "env-cmd -f env/.env.prod next start"
},
as you can see i created a build and run command for each environment and i also provided a .env.ENVNAME file for my config. the env/,env.ENVNAME is the path of my .env files. the env folder is in the root of the project.
here is how to run and build the app with env-cmd for above scripts:
npm run build:Env_name
for example for building my stg env:
npm run build:stg
or for starting the app
npm run start:Env_name
for example:
npm run start:stg
in your local you can use npm run dev to run the application and npm run build to build it.

nextjs - next build with NODE_ENV=development

I'd like to build my nextjs project as development mode.
and I tried like it
package.json
{
...
"scripts": {
"dev": "next",
"build:dev": "set NODE_ENV=development & next build",
"build:prod": "set NODE_ENV=production & next build",
"start:dev": "set NODE_ENV=development & next start",
"start:prod": "set NODE_ENV=production & next start"
}
...
}
next.config.js
module.exports = withSass({
env: {
baseUrl: process.env.NODE_ENV === "development" ? "devServerURL": "prodServerURL"
}
});
but I couldn't achieve what I want.
so, I tried with some change.
package.json
"scripts": {
"dev": "next",
"build": "next build",
"start:dev": "set NODE_ENV=development & next start",
"start:prod": "set NODE_ENV=production & next start"
}
but it also doesn't work.
How can I build the next with development mode?
Thanks in advance.
EDIT
My OS is Windows 10.
UPDATE 2022-11-23:
See how-to-set-environment-variables-from-within-package-json.
In short:
"start:dev": "NODE_ENV=development next start"
You might need cross-env (on Windows ? I don't know):
"start:dev": "cross-env NODE_ENV=development next start"
More specific documentation is now available (and maybe requirements also have changed, or maybe not):
environment-variable-load-order:
... Note: The allowed values for NODE_ENV are production, development and test.
non-standard-node-env:
... only permitting three (3) values:
production: When your application is built with next build
development: When your application is ran with next dev
test: When your application is being tested (e.g. jest)
ORIGINAL ANSWER:
See issue #9123, (Oct 18, 2019) :
NODE_ENV is a reserved environment variable that cannot be changed.
The only valid values are production, development, and test.
If you need your app behavior to change in different production
environments, please use a different variable like APP_ENV.
And issues #17032 (Sep 12, 2020):
process.env.NODE_ENV only has 2 possible values development and
production. If this is not set to that value you'll run into all kinds
of library edge cases (especially in node_modules) where you get
severely de-optimized results. E.g. if you run a performance test
you'll get significantly worse results if process.env.NODE_ENV is not
set to production
We solve it from our pipeline. Basically, when we build the image:
copy ".env.%ENVIROMENT%" to "./.env"
Then, if it finds a .env file, it always uses that.
You need to configure the value of %ENVIROMENT% in each pipeline you use for production or development (or make it recognize which pipeline it is).
If you have different steps during the image build, you could even use different environments for building and running.
Dockerfile example (this is not the best Dockerfile):
FROM node:16.17.3-buster-slim as build
WORKDIR /app
COPY package.json yarn.lock ./
COPY . ./
COPY .env.%ENVFILE_NEXT% ./.env
RUN yarn
RUN yarn build
FROM node:16.17.3-buster-slim as dst
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
COPY --from=builder /app/public ./public
COPY --from=builder /app/next.config.js ./next.config.js
COPY --from=builder /app/next-i18next.config.js ./next-i18next.config.js
#
COPY .env.%ENVFILE_NEXT% ./.env
EXPOSE 3000
CMD ["yarn", "start"]

How to make creat-react-app build listen on 0.0.0.0 instead of localhost?

I have a create-react-app bootstrapped project i want to deploy on an instance. Right now there are two ways that I have tried to set up the deployment which only ends up setting the port and not the host.
My project architecture is as below
Project
- Frontend
- Backend
My main issue is that although I am able to set the port on create-react-app build I cannot set the hostname to 0.0.0.0 instead of localhost.
In create-react app i hardcoded HOST=0.0.0.0 and PORT=443 in the start script.
Other thing i tried is have a script the serves the pages on port 443. Build serves on port 443 but not on 0.0.0.0.
Create-react-app scripts
"scripts": {
"start": "HOST=0.0.0.0 PORT=443 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Basic script at the root of the project
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"client": "cd frontend && npm start",
"client-prod": "cd frontend/build && npm install -g serve && serve -s build -l 443",
"server": "cd backend && npm start",
"sass": "node-sass -w frontend/source/styles/ -o frontend/source/styles/ --recursive",
"dev": "concurrently \"npm run server\" \"npm run client\" ",
"prod": "concurrently \"npm run server\" \"npm run client-prod\" "
},
The development on localhost works fine but i need to able to serve my build pages on 0.0.0.0:443 instead of localhost
env file instead in the root of your project and set HOST=0.0.0.0 and if you also want to disable the automatic browser opening when you type yarn or npm start, you can also set BROWSER=none. Check this link for more info https://create-react-app.dev/docs/advanced-configuration/
As per the advanced configuration page for React, the HOST environment variable does not apply when you deploy (in the table, see column Production, it says Ignored).
This means that HOST is not the way to set up your deployment. HOST is only functional when doing npm start in your development PC.
When you do npm run build, you get a /build folder with all the contents of the compiled application, and you get NO HTTP server. The HTTP server for deployment you select, configure and deploy on your own. See the deployment page to understand this fully.
So, in short: HOST is only for local development & testing. In deployment, you set up your NGINX, Apache or any other server in the way that server is configured.

ReactJS - ec2 server configuration issue

I am facing some issues while run the reacj js in ec2 server.
I am using this command to run the server : npm start
Getting this warning and stop the server
WARNING in bundle.js from UglifyJs
"scripts": {
"start": "npm run build:prod",
"build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --port 8080 --hot --host xx.xx.xx",
"build:prod": "NODE_ENV=production webpack -p --config webpack.config.js --progress"
},
Webpack details:

How to debug react-scripts hanging?

I'm deploying the create-react-app using docker on AWS ECS. I'm testing using dockerhub image that's pretty much the stock version of create-react-app. When launch the task, it's able to pull the container image, launch the docker container, however it hangs on running react-scripts start. All I can see in the container logs are:
01:51:38 npm info it worked if it ends with ok
01:51:38 npm info using npm#2.15.11
01:51:38 npm info using node#v4.7.3
01:51:42 npm info prestart test-react#0.1.0
01:51:42 npm info start test-react#0.1.0
01:51:42 > test-react#0.1.0 start /usr/src/app
01:51:42 > react-scripts start
01:52:06 Starting the development server...
It just hangs there and never finishes. However, when I manually run the docker container, everything works fine:
Starting the development server...
Compiled successfully!
The app is running at:
http://localhost:3000/
My Dockerfile is:
FROM node:4-onbuild
# Prepare app directory
RUN mkdir -p /usr/src/app
ADD . /usr/src/app
# Install dependencies
WORKDIR /usr/src/app
RUN npm install
# Build the app
RUN npm build
# Expose the app port
EXPOSE 3000
# Start the app
CMD npm start --loglevel debug
My package.json:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Looking for advice on how to debug or if there's additional logging I can do, thanks!
I figured it out - when I created defined the container in the ECS task, I didn't allocate enough memory to the docker container so when it was starting the server it ran out of memory and froze up. I changed the settings to allocate more memory to the docker container and now everything works.

Resources