Appsmith's client (UI/frontend) uses the ReactJS library and Typescript. The application also uses libraries like react-redux and redux-saga for workflows. We use VS Code Editor as our primary editor.
On your development machine, please ensure that:
You have docker
installed in your system. If not, please visit: https://docs.docker.com/get-docker/
You have mkcert
installed. Please visit: https://github.com/FiloSottile/mkcert#installation for details.
For mkcert
to work with Firefox, you may need to install the nss
utility. Details are in the link above.
On Linux, you can easily install mkcert
using the following command
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
You have envsubst
installed. Use brew install gettext
on MacOS. Linux machines usually have this installed.
You have cloned the repo in your local machine.
You have yarn installed as a global npm package, i.e. npm install -g yarn
.
Create local HTTPS certificates
Run the following command from the project root.
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
Add the domain dev.appsmith.com
to /etc/hosts
.
echo "127.0.0.1 dev.appsmith.com" | sudo tee -a /etc/hosts
Note:
Please be careful when copying the above string as space between the IP and the string goes missing sometimes.
Please check that the string is copied properly
cat /etc/hosts | grep appsmith
Run cmd: cp .env.example .env
Run Backend server
https://release.app.appsmith.com
for development purposes. (Recommended)
start-https.sh
to start the nginx container that will proxy the frontend requests to the backend server.
Pass the server name as an argument to this command to use that server as backend.
cd app/client
./start-https.sh https://release.app.appsmith.com // uses Appsmith's staging backend server as backend for your local frontend code
If you want to use the backend server running on your local, you do not need to pass a parameter when running start-https.sh
.
Run yarn install
.
Note:
On the Ubuntu Linux platform, please run the following cmd before step 2 below:
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
Run yarn start
.
If yarn start throws mismatch node version error
This error occurs because the node version is not compatible with the app environment. In this case, Node version manager can be used, allowing multiple node versions in different projects.
Check below for installation and usage details:
To pass credentials for logging in your cypress tests, you can create a local file app/client/cypress.env.json
to populate USERNAME
and PASSWORD
env variables or use one of the methods from their docs.
{
"USERNAME": "Enter username",
"PASSWORD": "Enter password"
}
To run cypress application for running tests, use these commands below,
cd app/client
yarn run cytest
In order to run cypress tests which use datasources/rest api, you will need to have TED (Test Event Driver) container running: (It bundles multiple services together along with fake data for testing)
docker pull appsmith/test-event-driver
docker run --name appsmithted -d -p 2222:22 -p 5001:5001 -p 3306:3306 -p 28017:27017 -p 5432:5432 -p 25:25 -p 5000:5000 -p 3000:3000 -v `pwd`/git-server/keys:/git-server/keys -v `pwd`/git-server/repos:/git-server/repo appsmith/test-event-driver
You need to have client and server running locally to run TED
Running appsmith backend server locally
Pull latest release branch docker image from Appsmith's public docker hub account.
docker rm appsmith;
cd ~/appsmith;
rm -rf stacks;
docker pull appsmith/appsmith-ce
docker run -d --name appsmith -p 8000:80 -p 9001:9001 appsmith/appsmith-ce:latest;
docker logs -f appsmith;
./start-https.sh http://localhost:8000 // if nginx is installed locally
./start-https.sh http://host.docker.internal:8000 // if nginx is running on docker
Create docker image from local source code
cd ~/appsmith
./scripts/local_testing.sh -l # This builds a fat docker image of local backend and frontend
# The docker image created above will show up in your docker desktop application
docker run -d --name appsmith -p 8000:80 -p 9001:9001 appsmith/appsmith-ce:local-testing;
./start-https.sh http://localhost:8000 // if nginx is installed locally
./start-https.sh http://host.docker.internal:8000 // if nginx is running on docker
Please check out our Testing Contribution guide for more details on setting up & troubleshooting Cypress runs on your machine.
To run the Jest unit tests, run:
cd app/client
yarn run test:unit
To run a single jest test,
cd app/client
# Run either command below to run a test
npx jest <file_path/file_name>
# or
yarn jest src/widgets/<filepath>/<filename>.test.ts --silent=false
To run a single jest test in watch mode,
npx jest --watch <file_path/file_name>
Before you follow the instructions above, make sure to check the following steps:
In the above Docker Desktop Setup instructions, make sure to:
Make sure to Clone the Repo in the WSL file system instead of the Windows file system.
And finally, you can open the folder in VSCode with WSL by following the instructions in Docker Desktop Setup, or by,
After this, you can continue Setting up from here.
You will need to add dev.appsmith.com
to Windows' C:\Windows\System32\drivers\etc\hosts
instead of /etc/hosts
. Alternately, you can install a desktop environment in WSL to open dev.appsmith.com
from a browser in WSL.
127.0.0.1 dev.appsmith.com
WSL network with windows can be brittle; make sure you can reach http://127.0.0.1:3000 from windows. If not, restarting wsl usually resolves the issue.
You can check logs with docker logs wildcard-nginx
.
If you see Address already in use
errors, look for the service running on port 80 and 443 with lsof -i tcp:80,443 | grep LISTEN
and stop the process.
Example: Some Linux distros have apache2
listening on 80. Stop them with sudo systemctl stop apache2
app/client/docker/templates/nginx-app.conf.template
over to your nginx sites directory.sub_filter
. None of those properties are required.proxy_pass
value for client from __APPSMITH_CLIENT_PROXY_PASS__
to http://localhost:3000
__APPSMITH_SERVER_PROXY_PASS__
with http://localhost:8080
(or the server you want to point to)mkcert
.ssl_certificate
& ssl_certificate_key
to the place where these certificates were generated.Please open a Github issue or join our discord server.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。