Hello, my dear reader! In this article, I would like to share the solution that I came up with during the development of the Angular application for Salesforce, using RemoteActions, StaticResources and DEV mode, without waiting for the resources to be deployed to Salesforce. This article will not tell you how to do something like this, but will give an answer how to use the solution which I prepared for you.

Prerequisites / Requirements

You should have basic knowledge and experience in Angular 2+ and Salesforce development. Also, you need to have Salesforce org (version 36.0 and later) for the deployment, evaluation and validation. The source code is here. I would recommend to use Angular CLI, but this solution will also work for other projects, since Gulp works with the project builder. If you do not use the Angular CLI, just change the command that builds the project "dev" and "prod" in package.json

Let's plunge into this situation. We are in 2018: Elon Musk successfully launched SpaceX; everybody talk about Machine learning, Virtual Reality, Artificial Intelligence; Angular releases the 6th version; mining and crypto-currencies is a common thing…  and this is unbelievable but meanwhile I receive a project with the stack of Angular + Salesforce. This is not surprising, but I found so much stuff on this topic on the Internet. Something from that was good enough and worth of attention and the rest was a huge mass of rubbish. My verdict: “Enormous amount of text and a lack of sense is a common denominator.” This was very overwhelming since I thought I could do everything easier and more transparent. Therefore, I made a decision to use a minimal set of instruments like Angular and Gulp, which almost every front-end developer is familiar with.

Anyways, here is what we get from Angular+Salesforce stack:       

  • Issue connected with common development

  • Only God knows how to work in the development mode

  • The build result is not easy to paste in VisualForce page

  • How to use RemoteActions?

  • How to use StaticResources

  • Before deployment on production we should edit VisualForce page and so on again and again

  • Done with your code=> built it=> made and archive=> deployed=> probably you should be prepared to change your VisualForce page

Enough! For how long can we endure this?!​

Gulp-jsforce-deploy

The first thing we need is a Tula to deploy the project to Salesforce, and during the search I found this post. I made a decision to stop at gulp-jsforce-deploy is a plugin for deploying prepared packages to Salesforce using JSforce's Metadata API. This is exactly what we need! Easy to use and only 3 relations with simple script for deployment which is a common thing for those who have already worked with  MavensMate.

The .env configuration file

In order not to store our sensitive data explicitly in the repository and keep them in one place, we will create a .env file and add it to .gitignore. All configuration settings will be stored in it, because it will not be very good if this file gets into the repository. Dotenv package itself will help us to receive the data.

This is how .env: content looks like
User-added image

I think this should be clear.

How to use the solution:

  1. Copy gulpfile.js from the repository and paste it to your Angular project, meanwhile copy the file salesforce.service.ts and paste to the service folder, let's name it src/services.
  2. Establish all dependencies with the command​ npm install gulp gulp-zip gulp-jsforce-deploy dotenv gulp-rename gulp-replace gulp-file --save-dev
  3. Add commands to package.json   "dev": "ng build && gulp rm && gulp build-dev-package && gulp deploy && ng serve",    "prod": "ng build && gulp rm && gulp build-package && gulp deploy"
  4. ng build is the command that collects the project. If you do not use the Angular CLI, replace this build command with your project, and if your project does not go to the dist folder, then you need to fix the paths in gulpfile.js.
  5. Define the necessary variables in the .env file and run it with the command npm run dev or npm run prod

That’s it! Kindly use it!

Further I am going to explain how this works:

  • Data from the .env file is pulled into the file gulpfile.js

  • Index.html from the dist folder is converted into apex: page

  • Resource file is created with the name from the .env file based on the build of the project

  • *meta.xml files are created for the resources, the page and the package in general

  • We are able to deploy 2 kinds of packages to our Salesforce Org, completely ready for production (command: npm run prod) or for development (command: npm run dev) using local resources instead of static resources on our maiden server. For more about this see below. 

You may use StaticResourсes

There is a following script in our gulpfile.js:
User-added image
This script adds _VfResource to the window object, now this variable is available globally and that's how we can use it - in our SalesforceService service there is a getSFResource method that returns the path to the resources.
User-added image
Here is an example of how you may use it:
some.component.html
User-added image
some.component.ts
User-added image

Easy!

Now you may use RemoteActions

There is a method callRemote in our service SalesforceService for this purpose:
User-added image
Here is an exapmle:

The callRemote method in our SalesforceService receives the first parameter with a string containing the Name of the Controller. The name of the Method is the Sampling of the RemoteAction. Further there are parameters (you can edit this as you prefer).
successCallback - processing of a successful response from the server.
failedCallback - error handling from the server.
User-added image

Develop / production mode

As I mentioned before, in order to deploy prepared to the production project within Salesforce,  we have to execute command npm run prod. This will create a package with StaticResources and Visualforce page with connected controllers and resources.  In case we prefer to work on DEV mode, we have to execute a command npm run dev, which will deploy only Visualforce page on Salesforce with connected controllers, local resources and will launch Dev Server. To do so, you should indicate the path to the local resources in the file .env in DEV_RESOURCES_URL variable. For instance, if we use Angular CLI, the path to resources by default will be http://localhost:4200 DEV_RESOURCES_URL=http://localhost:4200

I could define only one prominent drawback. You will have to refresh the page every time you make changes. Unfortunately, Livereload doesn’t work and have couple of thoughts regarding this, but let’s leave this for another article. I hope this solution will be useful for you and help you to be more productive without wasting time on project adaptation and environment for Salesforce. I will be grateful for your comments and healthy criticism. In case you have additional questions or thought you may send emails on contact@synebo.io