How to run n8n locally with customized UI?

Questions
1

I’m trying to run n8n locally using GitHub - n8n-io/n8n: Free and source-available fair-code licensed workflow automation tool. Easily automate tasks across different services. source code, but I want to change the UI a little bit and try to customize it. I’ve added a docker-compose file in the docker/image/n8n folder for the initial startup but my changes in the UI aren’t reflecting.

1 Like
2

It looks like your topic is missing some important information. Could you provide the following if applicable.

  • n8n version:
  • Database (default: SQLite):
  • n8n EXECUTIONS_PROCESS setting (default: own, main):
  • Running n8n via (Docker, npm, n8n cloud, desktop app):
  • Operating system:
3
  • n8n version:22
  • Database (default: SQLite):PostgreSQL
  • n8n EXECUTIONS_PROCESS setting (default: own, main):
  • Running n8n via (Docker, npm, n8n cloud, desktop app):Docker-compose file by cloning github repo
  • Operating system:window
4

Hi @a14a19,

Welcome to the community :tada:
You should be able to customize your UI if you’re running it locally. It’s hard to pinpoint what the issue is but maybe you can start here - Have you checked for any build errors to make sure you’ve managed to rebuild your frontend after making UI changes? Also, have you tried clearing browser cache by hard-reloading?

5

Hi @aya
Thank you so much :innocent:
n8n is one of the best open-source tools I’ve come across. The steps that I followed are:

  1. cloned the repo from GitHub
  2. run the docker file in - docker/images/n8n
  3. created a docker-compose file
  4. I tried editing the code (at this step, I had refreshed the browser, and cleared the cache)

Then I checked the Dockerfile properly it was taking source code from the GitHub repo and the n8n package. So, I tried running n8n scripts and it gave some weird errors of types in typescript and whatnot but somehow I managed.

I ran the following command:

  1. pnpm install
  2. pnpm run build
  3. pnpm run dev

Is there anything else I should be doing to run it and edit the code to my liking?

6

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.