LogoLogo
  • AppFlowy
    • โญStart here
      • Welcome to AppFlowy Docs
      • How to get help
      • Install AppFlowy
    • ๐Ÿ› ๏ธInstallation
      • ๐Ÿ–ฅ๏ธSystem Requirements
      • ๐Ÿ’ฟInstallation methods
        • Mac / Windows / Linux Packages
          • Installing on Linux
            • Installing & Setting up Flutter on Linux from Source
        • Docker
    • ๐ŸŒฑCommunity
      • ๐Ÿค™Get in contact
      • ๐Ÿ“”AppFlowy Mentorship Program
        • Program Guidance
        • Proposal Template
        • Pull Request Template
        • Mentorship 2023
          • Mentee Projects
            • Calendar View for AppFlowy Database
            • Custom Themes
            • Shortcuts and Customized Hotkeys for AppFlowy
            • Table
            • โญFavorites
            • Code Block
            • Outlines
            • Importers
            • AI Writers
            • Templates
          • Project Ideas
      • โœ๏ธWrite for AppFlowy
        • ๐Ÿ“ƒDrafts
          • [Draft] Use Case: Software Engineer
          • [Draft] Use Case: High School Students
          • [Draft] How to add a new property to appflowy database
      • ๐Ÿ‚Hacktoberfest
    • ๐Ÿ›ฃ๏ธRoadmap
    • ๐ŸŒ‹Product
      • ๐Ÿ’ฝData Storage
      • ๐ŸŽจCustomize and Style Content
      • โฎ๏ธDuplicate, Delete, and Restore
      • ๐Ÿ’ŽDatabases
        • ๐Ÿ”ขDatabase Properties
        • ๐Ÿ—ƒ๏ธManage Properties
      • โ“‚๏ธMarkdown
      • โŒจ๏ธShortcuts
      • ๐Ÿช„AppFlowy AI
      • ๐Ÿฆ™AppFlowy Local AI - Ollama
      • ๐ŸŽจThemes
      • โ˜๏ธAppFlowy Cloud
      • ๐ŸงฉAppFlowy Plugins
        • Table-view Databases
        • Kanban Board
        • Calendar
        • Auto Generator
        • Smart Edit
        • Code Blocks
        • Math Equations
        • Cover
        • Emoji
  • Documentation
    • ๐Ÿ’ŽSoftware Contributions
      • ๐ŸŸขGet started
      • ๐Ÿ’€Architecture
        • Frontend
          • Tauri
            • ๐Ÿ—บ๏ธCodeMap
          • Web
            • ๐ŸŒŸDesign Philosophy
          • Flutter
            • ๐Ÿ—บ๏ธProject Structure: CodeMap
            • ๐ŸงฎGrid
            • โš™๏ธSetting
          • Inter-Process Communication
          • User
            • User Data
            • Events & Notifications
          • Folder
            • Events & Notifications
          • Document
          • Database View
            • Events & Notifications
            • Grid
            • Calendar
            • Kanban Board
        • Backend
          • Initialize
          • Events
          • Delta(WIP)
          • Profiling
          • Database
        • Domain Driven Design
        • Proposals
      • ๐Ÿ—๏ธConventions
        • ๐Ÿ”คNaming Conventions
        • โŒจ๏ธCode Conventions
          • ๐ŸฆFlutter
        • ๐Ÿ™Git Conventions
      • ๐Ÿ’›Submitting Code
        • ๐ŸฆSetting Up Your Repositories
        • โคด๏ธSubmitting your first Pull Request
      • ๐ŸคŸCoding Standards and Practices
        • ๐Ÿ‘ฝRust Backend
    • ๐Ÿš€AppFlowy
      • ๐Ÿ‘พHow to contribute to AppFlowy
      • ๐Ÿ—๏ธBuilding from Source
        • ๐ŸŒณFlutter Setup
          • ๐ŸงBuilding on Linux
          • ๐ŸŽBuilding on macOS
          • ๐ŸชŸBuilding on Windows
        • ๐ŸŒWeb Setup
        • ๐Ÿ“กTauri Setup
      • โ˜๏ธDebugging with AppFlowy Cloud
      • ๐Ÿ”Debugging in VS Code
      • โ˜Ž๏ธTranslate AppFlowy
      • โ“Troubleshooting
      • ๐Ÿ‘ฎโ€โ™€๏ธLicenses
    • ๐Ÿ๏ธAppFlowy Editor
      • โŒจ๏ธHow to Implement Markdown Syntax To Style Text In AppFlowy Editor
      • ๐ŸงฉHow to Create a Plugin for AppFlowy Editor
      • ๐Ÿ‘ฎโ€โ™€๏ธLicenses
    • โ˜๏ธAppFlowy Cloud
      • ๐ŸŒˆArchitecture
      • โ˜€๏ธDeployment
  • Guides
    • Sync Desktop and Mobile
    • Self-Hosting AppFlowy
      • โ˜๏ธSelf-hosting AppFlowy with AppFlowy Cloud
      • ๐Ÿ†“Self-hosting AppFlowy for free Using Supabase
    • Import From Notion
  • Blog Highlights
    • ๐Ÿ”ฎDemystifying AppFlowy Editor's Codebase
  • Handbook
    • Core values
Powered by GitBook
On this page
  • ๐ŸŒŸ Introduction
  • ๐Ÿ›  Getting Started
  • ๐Ÿงช Running Tests
  • ๐Ÿ”„ Development Workflow
  • ๐Ÿš€ Production Deployment

Was this helpful?

Edit on GitHub
  1. Documentation
  2. AppFlowy
  3. Building from Source

Web Setup

PreviousBuilding on WindowsNextTauri Setup

Last updated 4 months ago

Was this helpful?

๐ŸŒŸ 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:

Clone the Repository

First, clone the repository to your local machine:

git clone https://github.com/AppFlowy-IO/AppFlowy-Web.git

Install Dependencies

Install the required dependencies using pnpm:

## ensure you have pnpm installed, if not run the following command
# npm install -g [email protected]

pnpm install

Configure Environment Variables

Create a .env file in the root of the project and add the following environment variables:

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:

pnpm run dev

Usage

  1. Create a .env file in the root of the project and add the following environment variables:

AF_WS_URL=wss://test.appflowy.cloud/ws/v1
AF_BASE_URL=https://beta.appflowy.cloud
AF_GOTRUE_URL=https://beta.appflowy.cloud/gotrue

๐Ÿš€ Building for Production(Optional)

if you want to run the production build, use the following commands

pnpm run build
pnpm run start

This will start the application in development mode. Open http://localhost:3000 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:

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:

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:

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:

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:

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

(v18.6.0) ๐ŸŒณ

(package manager) ๐Ÿ“ฆ

(testing framework) ๐Ÿƒ

(end-to-end testing) ๐Ÿงช

Install CORS Unblock extension in your browser to bypass CORS issues.

Open to view the application in your browser.

The Web server runs on Bun. For more details about Bun, please refer to the .

๐Ÿš€
๐Ÿ—๏ธ
๐ŸŒ
Node.js
pnpm
Jest
Cypress
Chrome
http://localhost:3000
Bun documentation