Yarn develop --watch-admin is not working

General
1

I am developing a local plugin and in this process I need to run
yarn build & yarn develop to even see the smallest of changes to reflect on UI.

Fortunately, recently I came to know we can use yarn develop --watch-admin command while building local plugin. But, it is not working. URL is generating only for http://localhost:1337.
I am receiving 404 for http://localhost:1337/admin

2 Likes
2

Facing the same issue. Did you find any solution to this?

1 Like
3

Nope, not yet :frowning_face:

4

I had the same issue. I believe it is related to this port issue

Their workaround listed worked for me:

//Setting port in ./admin/webpack.config.js

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

  return config;
};
1 Like
5

Not working for me :roll_eyes:

There is no Error log in Node in stdout… what is even the 8000 port?

Browser console:

GET http://localhost:1339/admin/project-type 404 (Not Found)
./.cache/admin/src/index.js @ main.bundle.js:42806
...
10:45:51.375 main.bundle.js:42759 Error: Request failed with status code 404
    at createError (main.bundle.js:39963:15)
    at settle (main.bundle.js:40255:12)
    at XMLHttpRequest.onloadend (main.bundle.js:39291:7)

Node out:

$ strapi watch-admin
Starting the development server...

Admin development at http://localhost:8000/admin/
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:1339/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.100.1:1339/
<i> [webpack-dev-server] Content not from webpack is served from '...\Learn\strapi-4-hello2\public' directory
<i> [webpack-dev-server] 404s will fallback to '/admin/'

Changed every port to 1339

  • .env (PORT=1339)
  • config/server.js (port: env.int(“PORT”, 1339),)
  • src\admin\webpack.config.js (port: 1339,)
6

It was my mistake!

I used strapi watch-admin command not strapi develop --watch-admin.

I did not known there was two different action, hmmm :face_with_monocle:

so it working now, thnx!

7

I used the devServer fix and although my admin system now works, it keeps logging me out every second code change when chrome refreshes. The changes do appear but its not a good experience if I have to log in every code change?

It throws a Warning, An error occurred while requesting the API error before and infinite loading, and then goes back to the log in window.

Looking at the network it tries to do a request to http://localhost:1337/admin/project-type, and theres a connection refused error. Looking at the nodejs logs it might be trying to connect to the backend api and since its down (due to restarting during a file change)

File changed: /src/plugins/testplugin/admin/src/pages/HomePage/index.js
[2022-02-06 01:35:20.721] info: The server is restarting

Can anyone help?

8

@mali Here is a discussion on a workaround for the logging out after a code change issue.

9

I get the same issue but only if i use a typescript strapi project. Otherwise, if a use a javascript strapi project, “npm develop – --watch-admin” works fine.
Also, I have stared using yarn because is solving better dependencies issues, but still doesn’t work.

10

Finally, I fixed it.
I deleted all the “dist” and “node_modules” folders, from the custom plugin and core app. Then:

  • At the core app run “yarn”
  • At the custom plugin folder run “yarn” and then “yarn build”
  • At the core app run “yarn strapi build”
  • And, finally, run “yarn strapi develop --watch-admin”
11

I’m having this same problem. No solution here worked.

When I run npm run develop -- --watch-admin --debug it seems to start fine at port 1337 (though it takes 5 minutes to start, way much more than without --watch-admin).

Trying to access http://localhost:1337 results in a never ending loading from the browser. It never reaches the app at all.

Testing on a clean project with npx create-strapi-app@latest my-project using strapi 4.25.8, --watch-admin runs without a problem. I’ll try to pin point the exact problem with my existing project

12

TLDR: Try renaming your project folder’s name to something else.

I copied the project in its entirety to the clean one (env, package, config, everything) and I never got the same bug, so it seems to be an environment problem.

I procceded to rename the original strapi project folder from “strapi” to “strapo” and then executed npm run develop -- --watch-admin and the problem was gone. No idea why that worked. I’ve been clearing npm cache manually every time before that so that wasn’t it. I changed the name of the new clean project folder to “strapi” and it didn’t break, so the name of the folder being “strapi” is not the problem. I’m really curious as to what the problem was, so if anyone has any idea I’ll like to hear it.