🌐Web Setup
Last updated
Last updated
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! 🚀
Before you begin, make sure you have the following installed on your system:
First, clone the repository to your local machine:
Install the required dependencies using pnpm:
Create a .env file in the root of the project and add the following environment variables:
To start the development server, run the following command:
Create a .env file in the root of the project and add the following environment variables:
Install CORS Unblock extension in your browser to bypass CORS issues. Chrome
Open http://localhost:3000 to view the application in your browser.
if you want to run the production build, use the following commands
This will start the application in development mode. Open http://localhost:3000 to view it in the browser.
We use Jest for running unit tests. To run the tests, use the following command:
This will execute all the unit tests in the project and provide a summary of the results. ✅
We use Cypress for end-to-end testing. To run the Cypress tests, use the following command:
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:
Both commands will provide detailed test results and generate a code coverage report.
To maintain code quality, we use ESLint. To run the linter and fix any linting errors, use the following command:
Our production deployment process is automated using GitHub Actions. The process involves:
Setting up an AWS EC2 instance: We use an EC2 instance to host the application.
Installing Docker and Docker Compose: Docker is installed on the AWS instance.
Configuring SSH Access: SSH access is set up with a user and password.
Preparing Project Configuration: We configure Dockerfile, nginx.conf, and server.cjs in the web project.
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:
The Web server runs on Bun. For more details about Bun, please refer to the Bun documentation.