admin.port is not applied for dev server

Bug report

Describe the bug

Specifying port field in ./config/admin.js doesn't have any effect and webpack dev server still starts on port 8080.

Steps to reproduce the behavior

1. Create new strapi app with yarn create strapi-app my-project
2. Set port: 3000 field in ./config/admin.js. see
3. Run strapi with --watch-admin flag.
4. Strapi opens http://localhost:8080/ url in browser and writes to terminal:

   <i> [webpack-dev-server] Project is running at:
   <i> [webpack-dev-server] Loopback: http://localhost:8080/
   ...
   

Expected behavior

Strapi starts on http://localhost:3000/

Code snippets

The issue is how Strapi configures and runs webpackDevServer at this line https://github.com/strapi/strapi/blob/master/packages/core/admin/index.js#L246. According to webpack doc, the start function doesn't expect any params. host and port should be set in devServer config.

Setting port in ./admin/webpack.config.js worked for me:

module.exports = (config, webpack) => {
  config.devServer = {
    ...config.devServer, // this is actually `undefined`, but just in case:)
    port: 3000,
  };

  return config;
};

System

• Node.js version: v14.18.1
• NPM version: 1.22.4
• Strapi version: "@strapi/strapi": "4.0.0",
• Database: sqlite
• Operating system: macos

[connermurphy]

I have the same issue. Seems like changing the port from 1337 in config/server.js breaks the admin panel.

[strapi-bot]

This issue has been mentioned on Strapi Community Forum. There might be relevant details there:

https://forum.strapi.io/t/yarn-develop-watch-admin-is-not-working/11282/4