Many a time, there are instances where one wants to deploy the Atlas UI changes (like static htmls, images, css and js files) which are built locally while remotely connecting to an Atlas server backend. This way, you don't really have to install Atlas (and other dependent services) on your local machine
In order to achieve this, one can set up a local grunt server with the below-mentioned steps
Install npm (npm is a node package manager, used for nodejs projects)
Checkout the Atlas codebase
Navigate to <workspace_directory>/dashboardv2 folder
Tunnel (add Local Port Forwarding) to Atlas instance deployed on a remote cluster using the following command
Grunt server listens on port #9999 and uses port #21000 for backend connections. Since we have added local port forwarding of 21000 port to our remote Atlas instance, the backend requests coming via local UI will automatically be redirected to remote Atlas host.
Finally, the UI you see on the browser is served from the local files, whereas the backend will be served from the remotely deployed Atlas.
Once the above is done, you can just navigate to dashboardv2 folder and edit the css, html, js and images as you like. The changes will be immediately reflected in the browser, all you have to do is refresh the page. No need of building any changes, copying them to remote cluster or re-deploying them.
There was one issue observed where local grunt server was caching some images. If the changes are not reflecting correctly on the UI, then stop and start the grunt server, which takes around a second.
Grunt server is configured to read the /public folder in the current directory where it is running, that is the reason we need to start the server from dashboardv2 folder. Dashboardv2 folder has /public directory, which in turn has all the images, css, js and html. It is defined in gruntfile.js