This new Web UI development workflow is only for those users who are developers or technical users with development skills and who will be performing advanced customizations on their website UI, meaning those who will be significantly altering core UI of Atlas. Regular users who will be customizing the website via our Administration panel and want to receive automatic updates do not need to use this workflow nor read about it.
Let’s get right into the workflow.
Getting Started
The first thing you should do is request to be excluded from the automatic updates. Please tell us beforehand to exclude your Web UI from auto updates so that we don’t overwrite any of your website files. You can open support request on nexus.thrinacia.com for this or send an email to support@thrinacia.com.
Dependencies
If you are using Windows or Mac OS, you will need to install and run a Linux virtual machine in order to make these changes. Also, if you want to make modifications, you will need to be using the following npm and node versions:
- npm: 5.6.0
- node: 8.9.4
Anything outside of the above specified operating system and node/npm versions is not supported.
Using SFTP
You will see the SFTP information by going to nexus.thrinacia.com, login, then go to your project on the top right corner of the screen.
Then click on wiki in the top menu.
Now click on portal information. Here you will see the SFTP info.
If you do not have access to nexus, please click on the lost password link and use the same email address that you provided when you signed up for the subscription plan.
When using SFTP, make sure that you add Port 22.
If you log in to your SFTP account as usual and navigate to webui folder, you should now be able to see two folders inside it named src and angapp. Alternatively, you can get the source code from our Github repository called “webui-v1-core” located at: https://github.com/Thrinacia
Please make SURE to download the whole webui folder to your local storage or clone the git repo mentioned above. You will then have both src and angapp directories available locally inside this downloaded folder or cloned repository.
Modifying Source Code
In the src directory, you should see the development source code, including the scripts, stylesheets, and third-party plugins we use in Thrinacia Atlas Web UI v1. Again, please make sure to download the whole webui folder to your local machine where you will be modifying files via provided SFTP access.
You can now start modifying files in src folder and set up your development environment around this directory. You can also install libraries you wish to use via bower or put the files you download from the internet in the plugins directory.
The custom folder can be used for any purpose you wish and this folder, along with the bower components and plugins folders, will be copied to the angapp directory during the build.
Testing Locally
Before developing locally please check that app_local.js file is under the local src folder. If the app_local.js file is not there then you need to copy this file only from the remote angapp folder via SFTP client to the local src folder as this file contains all the configuration settings for the website UI and is required for local development.
To develop and test locally, simply run the following in the terminal or command prompt within the src directory:
gulp
You will see something like this displayed
[22:41:58] Starting 'connectDev'... [22:41:58] Finished 'connectDev' after 16 ms [22:41:58] Starting 'connectDist'... [22:41:58] Finished 'connectDist' after 678 ms [22:41:58] Starting 'watch'... [22:41:59] Finished 'watch' after 422 ms [22:41:59] Starting 'default'... [22:41:59] Finished 'default' after 2.51 s [22:41:59] dev started http://localhost:5000 [22:41:59] LiveReload started on port 35729 [22:41:59] dist started http://localhost:5001 [22:41:59] LiveReload started on port 35729
This command will start the local built-in gulp development server on port 5000 with live reload capability. Now go to your browser and open
http://localhost:5000
This will allow you to watch any changes in the browser as you are editing the files in the src directory. You can make changes to controllers, views and so on and you will see your changes reflected immediately on the local server on port 5000.
Building and Deploying the app
After you are done with development and feel good about pushing code live, then run this command in the terminal or command prompt:
gulp build
This simple command will start minifying the JavaScript, stylesheets, and HTML files, change the names of those files according to checksum, then output all these files in the angapp folder.
Before uploading please check that app_local.js file is under the local angapp folder. If the app_local.js file is not there then you need to copy this file only from the remote angapp folder via SFTP client to the local angapp folder as this file contains all the configuration settings for the website UI.
Upload the new files
Next, you can login via the SFTP client again and browse your webui folder. Then remove the old angapp directory on remote side via SFTP client and re-upload the new one that was just built or compiled. Depending on your connection speed upload may take a minute or more. Note that your website will not be operational until the files have finished uploading in the angapp folder.
Do NOT remove the src or webui folders. You only need to remove old angapp folder from remote end and re-upload this same folder again from your local storage/drive to the remote location so that there is no old/stale files.
The target angapp folder is the production folder with minified and checksum’ed code so that the browser cache can bust correctly. This is the folder being uploaded back to webui folder via SFTP.
If for some reason during gulp run you encounter this error:
Local gulp not found in <directory>
Then please make sure you are in src directory as it is looking for gulpfile.js.
Please keep in mind that if you previously updated or modified specific directories in angapp folder before, which include angapp/custom and angapp/views/translation/<your_custom_translation_directory> folders then you should copy them into your src directory otherwise they will be overwritten by the gulp build.