How to make the modified UI interface take effect on port 8080？？？

[c2006878]

I have made arbitrary changes to the UI and found that it can take effect on port 3000, but it does not take effect on port 8080, resulting in the inability to obtain the latest page when building the image. What configuration changes are needed to make it effective on port 8080?

[c2006878]

I am using a Windows system

[wingkwong]

Our backend (the one running on 8080 locally) takes the frontend part from the package nc-lib-gui which is the built version of nc-gui (the one running on 3000 locally). Therefore, every local changes you make on nc-gui can be only seen in port 3000.

[wingkwong]

@da-da-da the backend takes nc-lib-gui package which is the built version of the frontend (nc-gui).

[c2006878]

I just changed the pages in the nc-gui folder (such as packages/nc-gui/components/dashboard/Sidebar/UserInfo. vue). Then building the image is execution ./build-local-docker-image.sh. Then access port 3333. But it just doesn't work.

[da-da-da]

Is build:copy of nc-gui used to place built version to nc-lib-gui ?
Plus, I also use build-local-docker-image.sh to build the image, there are also nothing changed in only EXPOSE 8080 in docker. I wanna know how to modify UI in nc-gui and show the modified when I visit localhost:8080 in docker or just start backend locally.(Mabey I need know how to change nc-lib-gui when nc-gui is modified)

I think backend used old nc-lib-gui, not new built version.

[wingkwong]

@da-da-da

Is build:copy of nc-gui used to place built version to nc-lib-gui ?

No. This command simply build the frontend and copy to nc-lib-gui/lib/dist/. In production, we publish to npm. In local docker, we copy dist to nocodb/docker/nc-gui and webpack build. You can see the sh script.

Plus, I also use build-local-docker-image.sh to build the image, there are also nothing changed in only EXPOSE 8080 in docker. I wanna know how to modify UI in nc-gui and show the modified

Basically I've already shared the approach. Just update nc-gui and run the script. I've tested today and shown the result above.

when I visit localhost:8080 in docker

did you run docker run -d -p 8080:8080 --name nocodb-local nocodb-local? Please make sure 8080 is running by docker one instead of local backend.

or just start backend locally.(Mabey I need know how to change nc-lib-gui when nc-gui is modified)

This won't work. If you use docker, you don't need to start your local backend.

[wingkwong]

@c2006878 Well I couldn't reproduce. Are you using the latest develop branch? Can you go to Terminal and run these commands to compare?

[da-da-da]

I have followed the steps in the link https://docs.nocodb.com/engineering/development-setup. I believe that if we are able to visit localhost:8080 with the new UI modification, it could solve our issue. Reason being, we are unable to get the new modification of nc-gui following the development-setup or building image in docker.

[wingkwong]

If it's running locally, then it's not possible as packages/nocodb takes the built version of frontend from npm unless you point it to the local build path.