0

I'm a bit new to Docker and was able to get one site up using create-react-app, but at the moment, I'm trying to get one working from scratch using Webpack. The site compiles with warnings, but I'm not seeing any result in the browser.

This is the output I'm getting when compiling, but I'm not seeing it in the browser.

Successfully built 190902aff07e
Successfully tagged climbtrack_web:latest
Recreating climbtrack ... done
Attaching to climbtrack
climbtrack | 
climbtrack | > climbtrack@1.0.0 start
climbtrack | > webpack serve --open
climbtrack | 
climbtrack | ℹ ｢wds｣: Project is running at http://localhost:3100/
climbtrack | ℹ ｢wds｣: webpack output is served from /
climbtrack | ℹ ｢wds｣: Content not from webpack is served from ./dist
climbtrack | ℹ ｢wds｣: 404s will fallback to /index.html
climbtrack | ℹ ｢wdm｣: Compiled with warnings.

Dockerfile

FROM node:15.5.0

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 3100

CMD ["npm", "start"]

docker-compose.yml

version: "3.8"

services:
  web:
    container_name: climbtrack
    restart: always
    build: .
    volumes:
      - .:/app
    ports:
      - "3100:3100"

webpack.config.js

const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"],
  },
  entry: "./src/index.tsx",
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: "ts-loader",
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(jpg|png|svg)$/,
        use: "file-loader",
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
    new HtmlWebPackPlugin({
      template: "./public/index.html",
    }),
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  devServer: {
    contentBase: "./dist",
    historyApiFallback: true,
    port: 3100
  },
  stats: "errors-only",
};

package.json

{
  "name": "climbtrack",
  "version": "1.0.0",
  "description": "Track your every climb",
  "main": "index.js",
  "scripts": {
    "watch": "webpack --watch",
    "start": "webpack serve --open",
    "test": "npm test"
  },
  "author": "Brannon Glover",
  "license": "ISC",
  "devDependencies": {
    "@types/styled-components": "^5.1.7",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.2",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.0.0",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "styled-components": "^5.2.1",
    "ts-loader": "^8.0.17",
    "typescript": "^4.1.5",
    "webpack": "^5.21.2",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "@types/html-webpack-plugin": "^3.2.4",
    "@types/react": "^17.0.1",
    "@types/react-dom": "^17.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}
pingeyeg
  • 632
  • 2
  • 6
  • 23
  • Why do you need a nodejs server when you have compiled one? Just serve the compiled static files – Debendra Feb 12 '21 at 14:41
  • Do you mean, I should not need the Dockerfile, which is adding node? – pingeyeg Feb 12 '21 at 14:52
  • node is just used to build the reactjs project, you can build and serve it from your web server without needing separate container. The way your are doing is not a way to serve reactjs app, reactjs runs on browser not on server – Debendra Feb 12 '21 at 15:19
  • 1
    You need to add `--host 0.0.0.0` to the `webpack serve` command in `package.json`. If the process in a container ever says "listening on localhost" then it won't be reachable from outside the container and you'll need an option like this to set the bind address. – David Maze Feb 12 '21 at 15:21
  • @DavidMaze thanks for that, I'm good now. If you want to add that as a solution, I'll check it. – pingeyeg Feb 12 '21 at 16:20
  • @Debendra as far as I can tell, I need the Dockerfile in order to build my app. To build, I need node. Maybe I'm not understanding fully. – pingeyeg Feb 12 '21 at 16:23
  • of course you need nodejs to build but not to serve to the users. – Debendra Feb 14 '21 at 09:19
  • Sorry, I guess I'm not following you @Debendra... at the moment, when I need to rebuild that app, I use --build, but after that, I just use the normal `docker-compose.yml up` command. – pingeyeg Feb 14 '21 at 16:39

0 Answers0