Open Source with Appsmith

This is a tutorial on “How to set up Appsmith on the local system and Contribute to Appsmith..”

Appsmith — The big picture

Appsmith is the open-source framework that lets your team build custom internal applications like dashboards, admin panels, CRUD apps faster, and together. The tagline says it all “One framework for all your internal tools”

Appsmith and Open-Source

With 7.9K+ stargazers, Appsmith is one of the renowned open source organisations on Github today. Obviously, we are talking about open source so the code is entirely free to use. You can actively submit your own features/bug fixes through GitHub. The dev team is very welcoming to community contributions and this I am talking about by my own experience with Appsmith.

They’ve also been fast to approve new feature requests and add them to GitHub when new ideas come up in Discord. I’ve seen them take a suggestion and create a new issue in GitHub within minutes, and on several occasions.

You can join the community discord here .

Why should you join Appsmith for hacktoberfest?

Every year, Appsmith looks forward to Hacktoberfest because they find it an excellent way to get to know their growing community, and they hope that we find a few issues that you would like to fix, and get to know their product and society better. Apart from this, they are distributing swags every year. For the year 2021, the swag details are given below:

• 1 Closed PR — Appsmith Stickers
• 2 Closed PRs — Appsmith Stickers, Water Bottle
• 3 Closed PRs — Appsmith Stickers, Water Bottle, Appsmith T-Shirt
• 4 Closed PRs — Appsmith Stickers, Water Bottle, Appsmith Hoodie
• 4 Closed PRs + — Appsmith Surprise Box
• Each tutorial counts towards 2 PRs
• Each how-to Guide counts towards 2 PRs

How to setup Appsmith on your local system?

For starting up anything you need to fork the repo and clone it on your system. Then as per your requirement you can go up setting the client side or the server side.

Setup From Source

1. Fork the project by clicking the fork button on the top-right corener at: https://github.com/appsmithorg/appsmith .

2. Right now, you have a fork of the Spoon-Knife repository, but you don’t have the files in that repository locally on your computer. Now you need to clone your copy of the repo to your local system.

Tap on the code drop-down button and copy the URL.

Using the terminal you can clone the repository by the following command…

git clone https://github.com/<your-github-username-here>/appsmith

cd appsmith

3. Create a new branch to work upon

git branch [branch-name]

4. Switch to the new branch that you have created and update the working directory

git switch -c [branch-name]

Setting up Client Side

In order to contribute to the client side application, you need to setup the absolute server but here we will do it using docker continers. There are two things that you need to have on the system before starting with the setup: Docker and mkcert.

Considering you are in the Appsmith directory… use terminal for the following:

cd app/server

Making copy of the environment variables…

cp envs/docker.env.example envs/docker.env

Starting the server using docker containers…

docker-compose up -d

You can check whether the servers are running or not using…

docker ps

To come back to the appsmith directory (root of the project)…

cd ../../

To download and install mkcert you can use the following command given below…

curl -s https://api.github.com/repos/FiloSottile/mkcert/releases/latest \
| grep “browser_download_url.*linux-amd64” \
| cut -d : -f 2,3 | tr -d \” \
| wget -i — -O mkcert
chmod +x mkcert
sudo mv mkcert /usr/local/bin

Now we need to create local certificates with mkcert…

cd app/client/docker && mkcert -install && mkcert “*.appsmith.com” && cd ../../..

This command will create 2 files in the docker/ directory:

• _wildcard.appsmith.com-key.pem
• _wildcard.appsmith.com.pem

Now we need to add Appscript domain using the following command…

echo “127.0.0.1 dev.appsmith.com” | sudo tee -a /etc/hosts

Next we need to create copy of environment variables using…

cp .env.example .env

Now move back to the client folder and run the script start-https.sh to start the Nginx container that will proxy the frontend code on your local system.

cd app/client
./start-https.sh https://release.app.appsmith.com

Now we can go ahead and install the packages for client side code using yarn…

yarn install

Now to increase the number of files that can be watched for changes use the command given below…

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Yayyyy!!! We are good to go now!

yarn start

🎉 Your Appsmith client is now running on https://dev.appsmith.com

Setting up Server Side

To get things going you need to have a few things set up : JAVA, Maven, MongoDB instance and Reddis instance.

Lets move into the server folder using…

cd app/server

Now we will generate classes using the Maven compile command,

mvn clean compile

Now we will create a copy of the envs/docker.env.example

cp envs/docker.env.example .env

Now we can build the server using…

./build.sh

Now we are ready to start the server…

./scripts/start-dev-server.sh

Yayyyyyy! By default, the server will start on port 8080.

When the server starts, it automatically runs migrations on MongoDB and will populate it with some initial required data. You can check the status of the server by hitting the endpoint: http://localhost:8080 on your browser. By default you should see an HTTP 401 error.

This is the complete setup guide for setting up Appsmith locally on your machine.

You can also checkout the official guide for setup here: Server and Client.

🍴 Contribution — Git Workflow

All code changes here at Appsmith happens through pull requests.

1. Fork the repo and create a new branch from the release branch.
2. Branches are named as fix/fix-name or feature/feature-name
3. Please add tests for your changes. Client-side changes require Cypress/Jest tests while server-side changes require JUnit tests.
4. Once you are confident in your code changes, create a pull request in your fork to the release branch in the appsmithorg/appsmith base repository.
5. If you’ve changed any APIs, please call this out in the pull request and ensure backward compatibility.
6. Link the issue of the base repository in your Pull request description.
7. When you raise a pull request, we automatically run tests on our CI. Please ensure that all the tests are passing for your code change. We will not be able to accept your change if the test suite doesn’t pass.