1

I am trying to containerize my React application with docker and am now a little bit stuck with the server.js file as I do not know how to "implement" the application inside. I was able to simply show a "Hello World" but can't seem to run the application inside.

My idea was initially, that I could just use the index.js file as an entrypoint and use it in the "res.end(x)" as this was the place where I could simply enter the "Hello World".

Am I missing just something small or is my general approach wrong?

My server.js file looks as followed:

const http= require('http');
const fs = require('fs');
const index = fs.readFileSync('index.js');

let app = http.createServer((req, res) => {
res.writeHead(200,{'Content-Type': 'text/plain'});
res.end(index);
});

app.listen(9030, '0.0.0.0');
console.log('Node server running on port 9030')
Codebling
  • 10,764
  • 2
  • 38
  • 66
Lucindor
  • 13
  • 2
  • Are you starting from Create React App? You'll need to make an `index.html` file. in that file, you will refer to `index.js`, which should be the entrypoint of the bundle created by Webpack (if you're using CRA), or Parcel. You'll need to serve all of the files that were created (usually in `dist` by Webpack or Parcel). You can either serve these files from within your node server app, or since once they are built these files don't change, some people prefer to put them in a regular web server. – Codebling Jan 12 '22 at 08:12
  • Maybe this should be a longer answer, but your approach is wrong. You cannot just serve the .js file, at least not as far as I know. You should include how you are building your React application in the question. There's a basic tutorial [here](https://mherman.org/blog/dockerizing-a-react-app/) – Codebling Jan 12 '22 at 08:14
  • Yes my application is based on the Create React App. In the tutorial you sent, there is nothing mentioned about the server.js file. Hence, is it not even required for that or am I misinterpreting that? – Lucindor Jan 12 '22 at 08:59
  • It is not required, although the way they are doing it in the tutorial is not suitable for production. I can write a more complete answer if that's helpful – Codebling Jan 12 '22 at 09:25
  • That would be perfect – Lucindor Jan 12 '22 at 09:48
  • Better put your statics in an nginx container. – The Fool Jan 12 '22 at 10:32

2 Answers2

1

I share with you this best documentation : https://nodejs.org/en/docs/guides/nodejs-docker-webapp/

Sofyane MAKERRI
  • 395
  • 3
  • 5
0

React is generally coded in .jsx files, which need to be compiled/transpiled into regular Javascript. Once this is done, you can serve these files to web browsers any way you like.

Understanding Build tools

React compilation/transpilation is done using Webpack or Parcel. If you're using Create-React-App, then you're using Webpack under the hood. CRA npm start will run a Webpack dev server, and npm run build will put all of the files you need in your build directory. You should do the latter if you want to

Avoid using Webpack dev server

Most tutorials, including the one linked in the comments, suggest using Webpack development server (aka npm start) to run your server in Docker. which is not recommended. Not only does it consume more resources to run, but the development build will run slower in browsers than the production build. The development server is also not meant to handle heavy loads.

Use build for production, with a real server

Use npm run build to generate the build files in the build directory, then use a real web server to serve them to the world.

One example in Docker, using Nginx to serve the files, can be found here

Alternatively the CRA build command itself offers a helpful hint:

The build folder is ready to be deployed. You may serve it with a static server:

npm install -g serve
serve -s build

This will work in a Docker Node container. An example of a very not-optimized Dockerfile might look like this

FROM node:16-alpine

COPY . . 

RUN npm install

RUN npm build

RUN npm install -D serve

CMD ["./node_modules/.bin/serve", "-s", "build"]

The build process can be improved here to leverage cache (by first copying package.json and package-lock.json and installing before copying code over, see example at the end of the answer here), and all of the RUN commands combined

Codebling
  • 10,764
  • 2
  • 38
  • 66