Virtual Hosts using Laragon

[adrianratajczak]

Hi!
In my work environment, I use the latest version of Windows 10 and Laragon for PHP, MySQL, etc. Laragon also allows you to create virtual hosts using node.js.

I installed Chisel, then created the project and had access to it through *.test/wp domain

Then I ran the npm run dev command and here my problem started.

WordPress in the localhost:3000 domain was left without style, the webpack did not build saved changes to the files even though it claims otherwise. In short, src files were not used.

My only option was to use npm run build which works perfectly.

I use the latest version of Chisel using Webpack.

I don't know where the problem occurred

[luboskmetko]

@adrianratajczak thanks for the feedback

@jakub300 can you take a look what could be a problem here? Thanks

[jakub300]

Hi @adrianratajczak,

Dev server expects WordPress on the top level directory on the domain, not wp subdirectory. You can try adjusting document root for domain in laragon generated apache config and make sure to adjust url in wp options.

Second option is adjusting path where scripts/styles are served on dev server, this can be done by adding special hook to object exported from chisel.config.js:

module.exports = {
 // ...

  hooks: {
    wordPress: {
      devMiddlewareOptions(config) {
        config.publicPath = `/wp${config.publicPath}`;
      },
    },
  },
};

Dev server stores files in memory (except from assets manifest that's read by WP), so it's expected that you cannot see them in file system.

[adrianratajczak]

Hi @jakub300 ,
for Laragon I've created a custom Virtual Host file located at X:\laragon\etc\apache2\sites-enabled , changed the URL in wp-options table and everything works like charm.

After adding the hook from above nothing changed. Still, page served from BrowserSync is without any styles and scripts

My Chisel config file

/* eslint-disable no-param-reassign */

const creatorData = {
  chiselVersion: '1.0.0-alpha.10',
  app: {
    name: 'Adrian Ratajczak FE WP Test',
    author: 'Adrian Ratajczak',
    projectType: 'wp-with-fe',
    browsers: ['modern', 'edge18'],
    nameSlug: 'adrian-ratajczak-fe-wp-test',
    hasJQuery: false,
  },
  wp: {
    title: 'Adrian Ratajczak FE WP Test',
    url: 'adriantest.test',
    adminUser: 'admin',
    adminEmail: '[email protected]',
    tablePrefix: 'twj8mx2s_',
  },
  wpPlugins: { plugins: [] },
};

const wp = {
  directoryName: 'wp',
  themeName: 'adrian-ratajczak-fe-wp-test-chisel',
  url: 'http://adriantest.test/',
};

module.exports = {
  creatorData,

  wp,

  output: {
    base: `${wp.directoryName}/wp-content/themes/${wp.themeName}/dist`,
  },
  
  hooks: {
    wordPress: {
      devMiddlewareOptions(config) {
        config.publicPath = `/wp${config.publicPath}`;
      },
    },
  },

  // To use React and hot reload for React components:
  // 1. Run `yarn add react-hot-loader @hot-loader/react-dom`
  // 3. Mark your root component as hot-exported as described on
  //    https://github.com/gaearon/react-hot-loader#getting-started (step 2)
  // 4. Uncomment line below
  // react: true,

  plugins: ['chisel-plugin-code-style', 'chisel-plugin-wordpress'],
};