diff --git a/docs/how_to_dev_frontend_en.md b/docs/how_to_dev_frontend_en.md
new file mode 100644
index 0000000000000000000000000000000000000000..f183c4f84abbef3c8cb30e076372433d5cc2bbc4
--- /dev/null
+++ b/docs/how_to_dev_frontend_en.md
@@ -0,0 +1,78 @@
+# VisualDL Web app Develop
+
+VisualDL has three components.
+1. The Python/C++ SDK that logs the data during training.
+1. The single page client side app that visualized training data.
+1. The server (powered on Flask) that reads the logs data and delivers it to the client side app for displaying graphs (scalars/histograms) and embeddings.
+
+This article will go over the basic web-app architecture and development guide.
+
+## TL;DR
+If you are not interested in the details of mumbo jumbo and want to start development as soon as possible, please run the following commands.
+
+To clone the repo and to prepare the environment
+```bash
+git clone git@github.com:PaddlePaddle/VisualDL.git
+cd VisualDL
+# Install all the requirements, we recommend you to setup a virtual environment to keep it clean.
+pip install -r requirements.txt
+# Set up the node dependencies and the VisualDL SDK
+./scripts/setup_dev_env.sh
+```
+To run the dev server and start coding
+```bash
+./scripts/start_dev_server.sh --logdir=<LOG_DIR>
+```
+The script will run a dev server at `http://0.0.0.0:8040`. Open a browser and navigate to `http://0.0.0.0:8040/` to see it
+
+## Web App Architecture
+
+The VisualDL Web app uses multiple frameworks to help manage the project. They are
+
+1. webpack: To manage all assets
+1. npm: To manage dependencies
+1. San: Javascript Component framework
+1. ECharts: To pilot charts
+
+## Webpack
+webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser.
+
+For a long time, web developers need to worry about backward compatibility or how to support different versions of browsers.
+webpack can help to transpile the Javascript files to the version where a browser can take. The developers don't need to implement version specific code anymore.
+It can also help to minify and uglify Javascript files. In a nutshell, webpack helps to manage all of your assets (.js, .css, .gif, .sass, etc) so you don't have to.
+
+To learn more about [webpack](https://webpack.js.org/).
+
+## npm package
+npm is the package manager for JavaScript and is a great tool to manage multiple dependencies. To confirm that you have npm installed. Please run this command
+``` bash
+npm -v
+```
+If your environment does not have npm already, please [download npm](https://www.npmjs.com/get-npm).
+
+The basic packaging information is stored in `package.json`. It specifies build scripts and dependencies for each environment.
+npm reads `package.json` to build different package according to the packaging script.
+If you are not familiar with npm, please refer to the [npm documentation](https://docs.npmjs.com/) for more detail.
+
+Install the necessary dependencies by running
+```bash
+# Navigate to the web-app folder
+cd VisualDL/frontend
+npm install
+```
+
+This command will go through `package.json` and install the dependencies in the local node_modules folder.
+
+## San
+
+San is a JavaScript component framework that helps the developer to implement web component in MVVM architecture pattern.
+
+San allows you to define a self-contained view model in a .san file and attach view model objects to DOM objects.
+
+To learn more about [san](https://github.com/ecomfe/san)
+
+## ECharts
+
+We use ECharts javascript library to render our charts and graphs. ECharts is a leading open source charting library that supports numerous data visualization.
+
+To learn more about ECharts framework, please visit [ECharts](https://ecomfe.github.io/echarts-doc/public/en/index.html).
diff --git a/docs/index_en.rst b/docs/index_en.rst
index da25bb454a152f3739dd827be176cfc0d8c704dc..9bec6c4c01f7806dd9f42d2c8a451f3e733a0faa 100644
--- a/docs/index_en.rst
+++ b/docs/index_en.rst
@@ -7,4 +7,5 @@ VisualDL
     Home<README.md>
     quick_start_en.md
     contribute_code_en.md
+    how_to_dev_frontend_en.md
     api/visualdl.rst
\ No newline at end of file