Community Articles
Find and share helpful community-sourced technical articles
Announcements
Alert: Welcome to the Unified Cloudera Community. Former HCC members be sure to read and learn how to activate your account here.
Labels (1)
New Contributor

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

  1. Install npm (npm is a node package manager, used for nodejs projects)
  2. Checkout the Atlas codebase
  3. Navigate to <workspace_directory>/dashboardv2 folder
  4. Tunnel (add Local Port Forwarding) to Atlas instance deployed on a remote cluster using the following command
    1. ssh -i <private_key> -L <local_port>:<cluster_host>:<cluster_port> <user_name>@<cluster_host>
    2. Once you execute the above command, all the requests being sent to http://localhost:21000 will be redirected to our remote Atlas instance running at http://<cluster_host>:<cluster_port>;
  5. Now hit, http://localhost:21000. You will see the Atlas UI. Login with the credentials.
  6. Start local grunt server using following command
    1. npm run dev
  7. 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.
  8. Once the grunt server starts, hit http://localhost:9999
  9. 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.

Note:

  • 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
module.exports = function(grunt) { 
	varbuildTime = newDate().getTime(),  
	distPath ='./dist/',  
	libPath = distPath + 'js/libs/',  
	isDashboardDirectory = grunt.file.isDir('public'),  
	nodeModulePath ='./node_modules/',  
	modulesPath ='public/'; 
	if(!isDashboardDirectory) {
		modulesPath ='../public/' 
	}
  • Local Port Forwarding can be avoided if you directly edit the gruntfile.js. You just have change 127.0.0.1 to remote Atlas host.
proxies: [{
	context:'/api',// the context of the data service
	host:'127.0.0.1',
	port:21000,// the port that the data service is running on
	https:false
}]
146 Views
Don't have an account?
Coming from Hortonworks? Activate your account here
Version history
Revision #:
1 of 1
Last update:
‎12-13-2018 02:09 PM
Updated by:
 
Contributors
Top Kudoed Authors