# Web Setup
### ๐ Introduction
Welcome to the AppFlowy Web project! This project aims to bring the powerful features of AppFlowy to the web. Whether you're a developer looking to contribute or a user eager to try out the latest features, this guide will help you get started.
AppFlowy Web is built with the following technologies:
* **React**: A JavaScript library for building user interfaces.
* **TypeScript**: A typed superset of JavaScript that compiles to plain JavaScript.
* **Bun**: A fast all-in-one JavaScript runtime.
* **Nginx**: A high-performance web server.
* **Docker**: A platform to develop, ship, and run applications in containers.
Let's dive in and get the project up and running! ๐
### ๐ Getting Started
#### Prerequisites
Before you begin, make sure you have the following installed on your system:
* [Node.js](https://nodejs.org/) (v18.6.0) ๐ณ
* [pnpm](https://pnpm.io/) (package manager) ๐ฆ
* [Jest](https://jestjs.io/) (testing framework) ๐
* [Cypress](https://www.cypress.io/) (end-to-end testing) ๐งช
#### Clone the Repository
First, clone the repository to your local machine:
```bash
git clone https://github.com/AppFlowy-IO/AppFlowy-Web.git
```
#### Install Dependencies
Install the required dependencies using pnpm:
```bash
## ensure you have pnpm installed, if not run the following command
# npm install -g pnpm@8.5.0
pnpm install
```
#### Configure Environment Variables
Create a `.env` file in the root of the project and add the following environment variables:
```bash
AF_BASE_URL=http://localhost:8080
AF_GOTRUE_URL=http://localhost:9999
AF_WS_URL=ws://localhost:8080/ws/v1
```
#### Start the Development Server
To start the development server, run the following command:
```bash
pnpm run dev
```
#### Usage
1. Create a `.env` file in the root of the project and add the following environment variables:
```bash
AF_WS_URL=wss://test.appflowy.cloud/ws/v1
AF_BASE_URL=https://beta.appflowy.cloud
AF_GOTRUE_URL=https://beta.appflowy.cloud/gotrue
```
2. Install **CORS Unblock** extension in your browser to bypass CORS issues. [Chrome](https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino)
3. Open [http://localhost:3000](http://localhost:3000/) to view the application in your browser.
#### ๐ Building for Production(Optional)
if you want to run the production build, use the following commands
```bash
pnpm run build
pnpm run start
```
This will start the application in development mode. Open to view it in the browser.
### ๐งช Running Tests
#### Unit Tests
We use **Jest** for running unit tests. To run the tests, use the following command:
```bash
pnpm run test:unit
```
This will execute all the unit tests in the project and provide a summary of the results. โ
#### Components Tests
We use **Cypress** for end-to-end testing. To run the Cypress tests, use the following command:
```bash
pnpm run cypress:open
```
This will open the Cypress Test Runner where you can run your end-to-end tests. ๐งช
Alternatively, to run Cypress tests in the headless mode, use:
```bash
pnpm run test:components
```
Both commands will provide detailed test results and generate a code coverage report.
### ๐ Development Workflow
#### Linting
To maintain code quality, we use **ESLint**. To run the linter and fix any linting errors, use the following command:
```bash
pnpm run lint
```
### ๐ Production Deployment
Our production deployment process is automated using GitHub Actions. The process involves:
1. **Setting up an AWS EC2 instance**: We use an EC2 instance to host the application.
2. **Installing Docker and Docker Compose**: Docker is installed on the AWS instance.
3. **Configuring SSH Access**: SSH access is set up with a user and password.
4. **Preparing Project Configuration**: We configure `Dockerfile`, `nginx.conf`, and `server.cjs` in the web project.
5. **Using GitHub Actions**: We use the easingthemes/ssh-deploy\@main action to deploy the project to the remote server.
The deployment steps include building the Docker image and running the Docker container with the necessary port mappings:
```bash
docker build -t appflowy-web-app .
docker rm -f appflowy-web-app || true
docker run -d -p 80:80 -p 443:443 --name appflowy-web-app appflowy-web-app
```
The Web server runs on Bun. For more details about Bun, please refer to the [Bun documentation](https://bun.sh/).
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.appflowy.io/docs/documentation/appflowy/from-source/web-setup.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
