Issue with Webpack and Docker

[EllieMaffio93]

Hi! I've installed Ignition theme a couple of times. Everything seems to be ok, but when I run Webpack my browser opens a new tab (localhost:3001) which keeps on loading forever. I'm starting to think the problem is with Docker and Webpack.

Here's my docker-compose.yml file:

version: '3'

services:
  # Database
  db:
    image: mysql:5.7
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: ellietest
      MYSQL_USER: root
      MYSQL_PASSWORD: root
    networks:
      - wpsite
  # phpmyadmin
  phpmyadmin:
    depends_on:
      - db
    image: phpmyadmin/phpmyadmin
    restart: always
    ports:
      - '8080:80'
    environment:
      PMA_HOST: db
      MYSQL_ROOT_PASSWORD: root 
    networks:
      - wpsite
  # Wordpress
  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    ports:
      - '3000:80'
    restart: always
    volumes: ['./wp-content:/var/www/html/wp-content']
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_NAME: ellietest
      WORDPRESS_DB_USER: root
      WORDPRESS_DB_PASSWORD: root
    networks:
      - wpsite
networks:
  wpsite:
volumes:
  db_data:

...and my theme.config.json:

{
  "name": "Ellie",
  "slug": "ellie",
  "server": "localhost:3000",
  "google_fonts": [
    "Roboto:400,400i,700,700i",
    "Roboto Slab:400,700"
  ],
  "menu_icon": "",
  "sidebar_icon": "",
  "submenu_arrow_icon": "",
  "comment_icon": "",
  "search_menu_item": false,
  "dev_admin_bar_color": "#156288",
  "admin_access_capability": "manage_options",
  "load_custom_icons": false,
  "mobile_menu_type": "app-menu",
  "logo_position": "logo-left",
  "site_top_container": "container",
  "default_acf_header_block" : ["post", "page"]
}

If I go to localhost:3000 I'm able to see new templates and html additions, but none of the css I add. is there something I'm missing? Sorry, I'm new to Webpack and I don't know how to configure it in order to make it work.

I really like your theme and I'm looking forward to starting develop with it!

Thanks for your help!

Eleonora

[saltnpixels]

hmmm. Sorry I didn't see this.

I'm not a docker expert... But its probably something to do with docker... :/ I'm not sure. Let me reach out adn ask someone I know who uses this with docker and see what he says.

[jp-albrecht]

Hey @EllieMaffio93,

I replicated your setup and was able to get it working!

The issue was coming from webpack.config.json. On line 96 where the proxy for BrowserSync is setup. You need to remove "https://". Your docker setup does not have an SSL, so the BrowserSync proxy was looking for the site on a protocol that was not working.

@saltnpixels, I will be putting in a PR to correct this issue, by allowing the user during setup to define whether their server is running on "https"

[saltnpixels]

Cool. thanks @jp-albrecht