0

I am creating a react app with webpack for bundling. And I need to create image of react application using Docker.

Here is the package.json.

{
  "name": "simple-weather-app",
  "version": "1.0.0",
  "description": "Qburst assesment project",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --config webpack/webpack.config.js --env env=development",
    "build": "webpack --config webpack/webpack.config.js --env env=production"
  },
  "author": "Abhiram P",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.22.8",
    "@babel/preset-env": "^7.22.7",
    "@babel/preset-react": "^7.22.5",
    "@babel/preset-typescript": "^7.22.5",
    "@babel/runtime": "^7.22.6",
    "@pmmmwh/react-refresh-webpack-plugin": "pmmmwh/react-refresh-webpack-plugin",
    "@types/react": "^18.2.14",
    "@types/react-dom": "^18.2.6",
    "autoprefixer": "^10.4.14",
    "babel-loader": "^9.1.3",
    "css-loader": "^6.8.1",
    "dotenv-webpack": "^8.0.1",
    "html-webpack-plugin": "^5.5.3",
    "postcss": "^8.4.25",
    "postcss-loader": "^7.3.3",
    "react-refresh": "^0.14.0",
    "style-loader": "^3.3.3",
    "tailwindcss": "^3.3.2",
    "typescript": "^5.1.6",
    "webpack": "^5.88.1",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "axios": "^1.4.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.10.1"
  }
}

Webpack config files

webpack.common.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = env = {
  entry: path.resolve(__dirname, '..', './src/index.tsx'),
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.(js|ts)x*$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
      {
        test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
        type: 'asset/inline',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '..', './public/index.html'),
    }),
  ],
  stats: 'errors-only',
};

webpack.config.js

const { merge } = require('webpack-merge')
const commonConfig = require('./webpack.common.js')

module.exports = (envVars) => {
  const { env } = envVars
  const envConfig = require(`./webpack.${env}.js`)
  const config = merge(commonConfig, envConfig)
  return config
}

webpack.development.js

const webpack = require('webpack');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const Dotenv = require('dotenv-webpack');

module.exports = {
  mode: 'development',
  devtool: 'cheap-module-source-map',
  devServer: {
    hot: true,
    open: true,
  },
  plugins: [
    new ReactRefreshWebpackPlugin(),
    new Dotenv({
      path: `./.env.development.local`,
    }),
  ],
};

webpack.production.js

const webpack = require('webpack');
const Dotenv = require('dotenv-webpack');

module.exports = {
  mode: 'production',
  devtool: 'source-map',
  plugins: [
    new Dotenv({
      path: `./.env.production.local`,
    }),
  ],
};

Docker config file

FROM node:18

WORKDIR /app

COPY package*.json ./

RUN npm install yarn
RUN yarn

COPY . .

RUN yarn build

EXPOSE 8080

CMD [ "yarn", "start" ]

When I rum Docker took image using docker build -t app:app . command it successfully took the image. When I run this image It runs a container and showing the application localhost url in terminal I checked it but it wasn't showing the application.

Here is the log showing in the docker:

(base) abhiram@Abhirams-MacBook-Pro simple-weather-app % docker run app:app             
yarn run v1.22.19
$ webpack serve --config webpack/webpack.config.js --env env=development
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/app/public' directory
Abhiram P Jayan
  • 339
  • 5
  • 16
  • We need to publish the container port as well: `docker run --publish 8080:8080 app:app`. For more information, please see [the corresponding documentation at `docs.docker.com`](https://docs.docker.com/engine/reference/run/#expose-incoming-ports). – Turing85 Jul 22 '23 at 08:39
  • I already tried it but it shows same issue. – Abhiram P Jayan Jul 22 '23 at 08:49
  • You'll also need [Cannot run webpack-dev-server inside docker](https://stackoverflow.com/questions/39632038/cannot-run-webpack-dev-server-inside-docker). (But I might consider whether you're gaining anything over just running `yarn start` locally – it's not obvious to me what Docker adds here.) – David Maze Jul 22 '23 at 11:00
  • Have you tried to put `run yarn build` before the `copy . .` ? – Beast Jul 25 '23 at 09:53

0 Answers0