From afd7c2943fe8dc8c63c548785103465c3f30355a Mon Sep 17 00:00:00 2001 From: Abdelrahman mostafa Date: Wed, 24 Jul 2024 00:18:03 +0300 Subject: [PATCH 1/2] feat(dev): Implement Docker-based dev environment with hot reload and update CONTRIBUTING.md --- .dockerignore | 9 ++- CONTRIBUTING.md | 141 +++++++++++++++++++++++++++++++++++++--- app.dev.dockerfile | 14 ++++ app.dockerfile | 2 +- backend.dev.dockerfile | 10 +++ docker-compose.dev.yaml | 66 +++++++++++++++++++ 6 files changed, 232 insertions(+), 10 deletions(-) create mode 100644 app.dev.dockerfile create mode 100644 backend.dev.dockerfile create mode 100644 docker-compose.dev.yaml diff --git a/.dockerignore b/.dockerignore index 600e365e..a2a57522 100644 --- a/.dockerignore +++ b/.dockerignore @@ -1 +1,8 @@ -**/node_modules \ No newline at end of file +node_modules +**/node_modules +.git +.gitignore +.dockerignore +Dockerfile +*.dockerfile +README.md \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index c779f911..27221c22 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,6 +1,28 @@ -# How to Contribute to Perplexica +# Contributing to Perplexica -Hey there, thanks for deciding to contribute to Perplexica. Anything you help with will support the development of Perplexica and will make it better. Let's walk you through the key aspects to ensure your contributions are effective and in harmony with the project's setup. +Hey there, thanks for deciding to contribute to Perplexica. Anything you help with will support the development of Perplexica and will make it better! This guide will help you get started with contributing to our project. + +## Table of Contents + +- [Prerequisites](#prerequisites) +- [Project Structure](#project-structure) +- [Setting Up Your Environment](#setting-up-your-environment) + - [Option 1: Using Docker (Recommended)](#option-1-using-docker-recommended) + - [Option 2: Without Docker](#option-2-without-docker) +- [Development Workflow](#development-workflow) +- [Coding and Contribution Practices](#coding-and-contribution-practices) +- [Making Contributions](#making-contributions) +- [Coding Standards](#coding-standards) +- [Reporting Issues](#reporting-issues) +- [Help and Support](#help-and-support) + +## Prerequisites + +Before you begin, ensure you have the following installed: +- Git +- Node.js (version specified in the project's package.json) +- npm or yarn +- Docker and Docker Compose (if using the Docker setup) ## Project Structure @@ -11,22 +33,88 @@ Perplexica's design consists of two main domains: ## Setting Up Your Environment -Before diving into coding, setting up your local environment is key. Here's what you need to do: +Before diving into coding, setting up your local environment is key. You have two options: using Docker (recommended) or setting up without Docker. + +### Option 1: Using Docker (Recommended) + +This method provides a consistent development environment with hot reloading. + +1. Ensure Docker and Docker Compose are installed on your system. + +2. Fork the repository on GitHub. + +3. Clone your forked repository: + ``` + git clone https://github.com/your-username/perplexica.git + cd perplexica + ``` -### Backend +3. Copy the sample configuration files: + ``` + cp sample.config.toml config.toml + cp ui/.env.example ui/.env + ``` + +4. Edit `config.toml` and `ui/.env` to add necessary configuration values. + +5. Build and start the development environment: + ``` + docker-compose -f docker-compose.dev.yaml up --build + ``` + +The services will be available at: +- Frontend: http://localhost:3000 +- Backend: http://localhost:3001 + +This setup includes hot reloading: +- Frontend code changes (in `ui` directory) are immediately reflected in the browser. +- Backend code changes (in `src` directory) automatically restart the backend service. +- Changes to `package.json` in either root or `ui` directory trigger an automatic rebuild. + +### Option 2: Without Docker + +#### Backend Setup 1. In the root directory, locate the `sample.config.toml` file. 2. Rename it to `config.toml` and fill in the necessary configuration fields specific to the backend. 3. Run `npm install` to install dependencies. 4. Use `npm run dev` to start the backend in development mode. -### Frontend +#### Frontend Setup 1. Navigate to the `ui` folder and repeat the process of renaming `.env.example` to `.env`, making sure to provide the frontend-specific variables. 2. Execute `npm install` within the `ui` directory to get the frontend dependencies ready. 3. Launch the frontend development server with `npm run dev`. -**Please note**: Docker configurations are present for setting up production environments, whereas `npm run dev` is used for development purposes. +**Please note**: While Docker configurations are present for setting up production environments, `npm run dev` is used for development purposes in the non-Docker setup. + +## Development Workflow + +1. Create a new branch for your feature or bug fix: + ``` + git checkout -b feature/your-feature-name + ``` + +2. Make your changes in the appropriate directories (`src` for backend, `ui` for frontend). + +3. Test your changes thoroughly. + +4. Run the formatter: + ``` + npm run format:write + ``` + +5. Commit your changes with a descriptive commit message: + ``` + git commit -am "Add your commit message here" + ``` + +6. Push your branch to GitHub: + ``` + git push origin feature/your-feature-name + ``` + +7. Open a pull request on GitHub, describing your changes in detail. ## Coding and Contribution Practices @@ -34,6 +122,43 @@ Before committing changes: 1. Ensure that your code functions correctly by thorough testing. 2. Always run `npm run format:write` to format your code according to the project's coding standards. This helps maintain consistency and code quality. -3. We currently do not have a code of conduct, but it is in the works. In the meantime, please be mindful of how you engage with the project and its community. +3. Write clear, concise commit messages that explain the purpose of your changes. +4. Keep your pull requests focused on a single feature or bug fix. +5. Update documentation, including README.md and inline comments, if your changes affect the project's usage or setup. + +We currently do not have a formal code of conduct, but it is in the works. In the meantime, please be mindful of how you engage with the project and its community. We expect all contributors to be respectful, inclusive, and professional in their interactions. + +## Making Contributions + +1. Fork the repository and create your branch from `main`. +2. If you've added code that should be tested, add tests. +3. Issue that pull request! + +## Coding Standards + +- Follow the existing code style and structure. +- Write clear, commented code. Use JSDoc comments for functions and classes. +- Write clear, commented code. +- Ensure type safety by using TypeScript effectively. +- Write unit tests for new features when applicable. + +## Reporting Issues + +If you find a bug or have a suggestion for improvement: + +1. Check if the issue already exists in the GitHub issue tracker. +2. If not, create a new issue, providing as much detail as possible, including: + - A clear and descriptive title + - Steps to reproduce the issue + - Expected behavior + - Actual behavior + - Your environment (OS, browser, version, etc.) + - Any relevant screenshots or error messages + +## Help and Support + +If you have any questions or feedback, please feel free to reach out to us. You can: + + - Create an issue on GitHub for project-related questions. -Following these steps will help maintain the integrity of Perplexica's codebase and facilitate a smoother integration of your valuable contributions. Thank you for your support and commitment to improving Perplexica. +We appreciate your contributions and look forward to your involvement in making Perplexica even better! \ No newline at end of file diff --git a/app.dev.dockerfile b/app.dev.dockerfile new file mode 100644 index 00000000..c5e12716 --- /dev/null +++ b/app.dev.dockerfile @@ -0,0 +1,14 @@ +FROM node:slim + +ARG NEXT_PUBLIC_WS_URL +ARG NEXT_PUBLIC_API_URL +ENV NEXT_PUBLIC_WS_URL=${NEXT_PUBLIC_WS_URL} +ENV NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL} + +WORKDIR /home/perplexica + +COPY ui /home/perplexica/ + +RUN yarn install + +CMD ["yarn", "dev"] diff --git a/app.dockerfile b/app.dockerfile index 105cf86a..f9956d41 100644 --- a/app.dockerfile +++ b/app.dockerfile @@ -1,4 +1,4 @@ -FROM node:alpine +FROM node:slim ARG NEXT_PUBLIC_WS_URL ARG NEXT_PUBLIC_API_URL diff --git a/backend.dev.dockerfile b/backend.dev.dockerfile new file mode 100644 index 00000000..179f3ebe --- /dev/null +++ b/backend.dev.dockerfile @@ -0,0 +1,10 @@ +FROM node:slim + +WORKDIR /home/perplexica + +COPY package.json yarn.lock ./ +RUN yarn install + +COPY . . + +CMD ["yarn", "dev"] \ No newline at end of file diff --git a/docker-compose.dev.yaml b/docker-compose.dev.yaml new file mode 100644 index 00000000..7493786c --- /dev/null +++ b/docker-compose.dev.yaml @@ -0,0 +1,66 @@ +services: + searxng: + image: docker.io/searxng/searxng:latest + volumes: + - ./searxng:/etc/searxng:rw + ports: + - 4000:8080 + networks: + - perplexica-network + + perplexica-backend: + build: + context: . + dockerfile: backend.dev.dockerfile + depends_on: + - searxng + ports: + - 3001:3001 + volumes: + - ./src:/home/perplexica/src + - ./package.json:/home/perplexica/package.json + - ./yarn.lock:/home/perplexica/yarn.lock + - backend-dbstore:/home/perplexica/data + extra_hosts: + - 'host.docker.internal:host-gateway' + networks: + - perplexica-network + environment: + - SEARXNG_API_URL=http://searxng:8080 + develop: + watch: + - path: ./package.json + action: rebuild + - path: ./src + target: /home/perplexica/src + action: sync + + perplexica-frontend: + build: + context: . + dockerfile: app.dev.dockerfile + depends_on: + - perplexica-backend + ports: + - 3000:3000 + volumes: + - ./ui:/home/perplexica + - /home/perplexica/node_modules + networks: + - perplexica-network + environment: + - NEXT_PUBLIC_API_URL=http://localhost:3001/api + - NEXT_PUBLIC_WS_URL=ws://localhost:3001 + develop: + watch: + - path: ./ui/package.json + action: rebuild + - path: ./ui + target: /home/perplexica + action: sync + +networks: + perplexica-network: + +volumes: + backend-dbstore: \ No newline at end of file From 71127611c012c33aa353013eb5ca637d8e2fd8f7 Mon Sep 17 00:00:00 2001 From: Abdelrahman mostafa Date: Thu, 25 Jul 2024 18:24:51 +0300 Subject: [PATCH 2/2] sync --- ui/components/ChatWindow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/components/ChatWindow.tsx b/ui/components/ChatWindow.tsx index ea9a93d3..531b0041 100644 --- a/ui/components/ChatWindow.tsx +++ b/ui/components/ChatWindow.tsx @@ -541,4 +541,4 @@ const ChatWindow = ({ id }: { id?: string }) => { ); }; -export default ChatWindow; +export default ChatWindow; \ No newline at end of file