Skip to content

Rewrite frontend for the app with React#10

Open
chicco-carone wants to merge 5 commits intoITSpecialist111:mainfrom
chicco-carone:rewrite-frontend
Open

Rewrite frontend for the app with React#10
chicco-carone wants to merge 5 commits intoITSpecialist111:mainfrom
chicco-carone:rewrite-frontend

Conversation

@chicco-carone
Copy link
Copy Markdown

This pull request introduces a significant update to the automation_inspector project by integrating a new frontend built with Next.js and Tailwind CSS, alongside improvements to the backend and Docker setup. The changes enhance the project's architecture, functionality, and developer experience.

Frontend Integration and Features:

  • Added a new Next.js-based frontend in the automation-inspector-frontend folder, including key files such as layout.tsx, page.tsx, App.tsx, and AutomationRow.tsx. This frontend provides a modern UI for inspecting Home Assistant automations.
  • Implemented Tailwind CSS with custom themes and variants in globals.css for styling consistency and responsiveness.
  • Introduced ESLint and Prettier configurations for code quality and formatting, including eslint.config.js and eslint.config.mjs.

Backend Updates:

  • Modified main.py to dynamically mount frontend directories based on the new Next.js structure, ensuring compatibility with the updated frontend.
  • Improved error handling and code readability in background tasks within main.py.

Docker and Build Process:

  • Updated the Dockerfile to include a multi-stage build process for the frontend using Node.js, followed by the backend setup. This ensures optimized Docker images.
  • Added .dockerignore to exclude unnecessary files from the Docker context, such as node_modules and logs.

These changes collectively modernize the project, streamline the development workflow, and enhance the user experience with a robust and visually appealing interface.

I know that this pr is really big and probably unexpected but after seeing your tool and understanding its usefulness my only issue was that awful looking frontend. If you have any questions about it just tell me and I'll try to explain it.

@chicco-carone chicco-carone changed the title Update docker files to build the frontend Rewrite frontend for the app with React Jun 22, 2025
@ITSpecialist111
Copy link
Copy Markdown
Owner

Wow - thank you so much for investing time into this. I'm just finishing up work, then will get to testing this evening!

@ITSpecialist111 ITSpecialist111 self-assigned this Jun 23, 2025
@chicco-carone
Copy link
Copy Markdown
Author

chicco-carone commented Jun 23, 2025

There is currently only one major issue that is the same that was causing some issues when running not in supervisor. that is the hardcoded api url which currently is not working. if you have something in mind to fix it i could implement it easily especially since i'm not sure how networking works between ingress in ha. If you want to quickly try the frontend you can run the dev server on your local machine and edit the API.ts file and in the base url set your full ha + port ip (for example http://192.168.1.7:1234/) which is how I tested it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants