BrowserSync not running on localhost:3000 within Docker

  browser-sync, docker, docker-compose, roots-sage

I’m using Roots Sage template and Docker compose. Browsersync and webpack are being used to compile the style/js files and it seems to be watching for changes and compiling.

However, local host does not update the style and localhost:3000 – which Browsersync is proxied to, doesn’t load, can anyone give me any pointers?

Config.json file

{
  "entry": {
    "main": ["./scripts/main.js", "./styles/main.scss"],
    "customizer": ["./scripts/customizer.js"]
  },
  "publicPath": "/app/themes/theme",
  "devUrl": "http://localhost",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": ["app/**/*.php", "config/**/*.php", "resources/views/**/*.php"]
}

Browsersync/webpack

module.exports = {
  devServer: {
    watchOptions: {
      poll: true,
    },
  },
  output: {
    pathinfo: true,
    publicPath: config.proxyUrl + config.publicPath,
  },
  watchOptions: {
    aggregateTimeout: 200,
    poll: 1000,
  },
  devtool: '#cheap-module-source-map',
  stats: false,
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new BrowserSyncPlugin({
      target,
      open: config.open,
      proxyUrl: config.proxyUrl,
      watch: config.watch,
      delay: 500,
    }),
  ],
};

Docker-compose YAML

version: "3.7"
services:
  app:
    image: docker.pkg.github.com/privaterepo/base-images/wordpress:latest
    restart: unless-stopped
    environment:
      XDEBUG_CONFIG: remote_host=host.docker.internal remote_port=9000 remote_enable=1
      PHP_IDE_CONFIG: "serverName=Docker"
    volumes:
      - ./:/app
      - ./extra/php.ini:/usr/local/etc/php/conf.d/app.ini
      - ./.logs:/container/logs
    links:
      - db
  web:
    image: nginx:alpine
    restart: unless-stopped
    ports:
      - 80:80
      - 443:443
    volumes:
      - ./:/app
      - ./extra/nginx:/etc/nginx/conf.d
      - ./.logs:/container/logs
    links:
      - app
  db:
    image: mariadb:10.4
    restart: unless-stopped
    ports:
      - 3306:3306
    environment:
      MYSQL_USER: user
      MYSQL_PASSWORD: pass
      MYSQL_DATABASE: database
      MYSQL_ROOT_PASSWORD: password
    volumes:
      - db:/var/lib/mysql
  build:
    image: node:lts
    restart: unless-stopped
    depends_on:
      - web
    ports:
      - 3000:3000
      - 3001:3001
    volumes:
      - ./:/app
    # entrypoint: npm --prefix=/app run watch
volumes:
  db:

Source: Docker Questions

LEAVE A COMMENT