Back

How to Deploy Angular App to Salesforce: Developer Insights

6min
1

Hi, I’m Aleksandr Havrylov, a front-end developer at Synebo. I want 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 show you how to deploy an Angular app to Salesforce without suffering and pain.

Prerequisites / Requirements

You should have basic knowledge and experience in Angular 2+ and Salesforce development. Also, it would be best if you had Salesforce org (version 36.0 and later) for the deployment, evaluation, and validation. The source code is here.

I would recommend using 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, 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 talks about Machine learning, Virtual Reality, Artificial Intelligence. Angular releases the 6th version. Mining and crypto-currencies is common thing. And you would never believe it, but meanwhile, I received a project with the stack of Angular + Salesforce. I’ve 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 vast 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. Therefore, I decided to use a minimal set of instruments like Angular and Gulp, which almost every front-end developer is familiar with.

Here is what we get from the Angular+Salesforce stack:   

  • Issue connected with joint 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 the 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

We first need a Tula to deploy the project to Salesforce, and during the search, I found this post. I decided to stop at gulp-jsforce-deploy, 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 a simple script for deployment, which is typical for those who have already worked with MavensMate.

The .env configuration file

To not 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 because it will not be nice if this file gets into the repository. Dotenv package itself will help us to receive the data.

2

This is how .env: content looks like. 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 it 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
  • The 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 can deploy 2 kinds of packages to our Salesforce Org, entirely 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сesThere is the following script in our gulpfile.js:

3

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, there is a getSFResource method that returns the path to the resources.

4

Here is an example of how you may use it:

some.component.ts

5

Easy!

Now you may use RemoteActions

There is a method callRemote in our service SalesforceService for this purpose:

6

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. Additionally, there are parameters (you can edit this as you prefer).

successCallback – processing of a successful response from the serverfailedCallback – error handling from the server.

7

Develop / production mode

As I mentioned before, 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. If we prefer to work on DEV mode, we have to execute a command npm run dev, which will deploy only the Visualforce page on Salesforce with connected controllers, local resources, and 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

Final Thoughts

I could find only one prominent drawback in my solution. You will have to refresh the page every time you make changes. Unfortunately, Livereload doesn’t work, and have a couple of thoughts regarding this, but let’s leave this for another article.

I hope this solution will be helpful for you and help you be more productive without wasting time on project adaptation and the environment for Salesforce. I will be grateful for your comments and healthy criticism. In case you have additional questions or thought, send emails to contact@synebo.io.

Table of content
How to Deploy Angular App to Salesforce: Developer Insights Prerequisites / Requirements Develop / production mode Final Thoughts
articles You might be interested in
How to run a Salesforce Health Check
18 Apr 2024
How-to Guides and Tutorials
How to Run a Salesforce Health Check
Yana Pushkar
Yana Pushkar
16 min
A comparative analysis of managed vs unmanaged package Salesforce
15 Apr 2024
Salesforce development
A Comparative Analysis of Managed vs. Unmanaged Package Salesforce
Synebo
Synebo
13 min
How much does it cost to hire a salesforce consultant
08 Apr 2024
Salesforce development
How Much Does it Cost To Hire a Salesforce Consultant?
Andrii Kliuchka
Andrii Kliuchka
12 min
What Is the Difference Between Marketo Engage and Salesforce Marketing Cloud?
01 Apr 2024
Salesforce development
What Is the Difference Between Marketo Engage and Salesforce Marketing Cloud?
Synebo
Synebo
8 min
Salesforce B2B commerce cloud
29 Mar 2024
Salesforce development
Salesforce B2B Commerce Cloud: Benefits, Features and Implementation
Synebo
Synebo
8 min
Salesforce Sales Cloud vs Salesforce Service Cloud_ What’s The Difference
25 Mar 2024
Salesforce development
Salesforce Sales Cloud vs Salesforce Service Cloud: What’s The Difference?
Synebo
Synebo
10 min
Best ways to use chatgpt in Salesforce
20 Mar 2024
Salesforce development
Best Ways to Use ChatGPT in Salesforce
Synebo
Synebo
8 min
Why saas compnies need salesforce
19 Mar 2024
Salesforce development
Why SaaS Companies Need Salesforce
Andrii Kliuchka
Andrii Kliuchka
11 min
Salesforce Marketing Cloud account engagement vs marketing cloud
14 Mar 2024
Salesforce development
Marketing Cloud Account Engagement (Pardot) vs Marketing Cloud: What’s the Difference?
Synebo
Synebo
9min
Salesforce-Marketing-Cloud_-2-scaled
26 Feb 2024
Salesforce development
Salesforce Service Cloud Implementation – Complete Guide
Olexander Orlуk
Olexander Orlуk
14 min
Complete-Guide-scaled
14 Feb 2024
How-to Guides and Tutorials
Complete Guide to Salesforce Testing
Yana Pushkar
Yana Pushkar
16 min
35
17 Jan 2024
What is Salesforce Experience Cloud, and What You Get From It?
Yana Pushkar
Yana Pushkar
10 min
1
05 Jan 2024
How-to Guides and Tutorials
How to Send Emails via Outlook API from your Salesforce Org
Anastasia Sapihora
Anastasia Sapihora
7 min
1
27 Dec 2023
How to Improve Your Business With Salesforce Custom Development?
Yana Pushkar
Yana Pushkar
7min
Salesforce Marketing Cloud
26 Dec 2023
Salesforce development
Salesforce Marketing Cloud: Complete 2024 Guide
Yana Pushkar
Yana Pushkar
11 min
1
22 Dec 2023
21 Best Nonprofit Software Tools to Enhance Your Work
Kristina
Kristina
16 min
1
17 Dec 2023
The Anatomy of Dynamic Programming [with Codes and Memes]
Olexander Oleksiyenko
Olexander Oleksiyenko
11min
Working with salesforce files: the basics
13 Dec 2023
How-to Guides and Tutorials
How to Work With Salesforce Files: The Basics
Olexander Orlуk
Olexander Orlуk
14 min
1
11 Dec 2023
Commerce Cloud B2B vs. B2C. What Is the Difference?
Yana Pushkar
Yana Pushkar
5 min
1
09 Dec 2023
What is Salesforce Flow, and Why Do You Need It?
Sergii Romashov
Sergii Romashov
5 min
15 Types of Salesforce Clouds
04 Dec 2023
15 Types of Salesforce Clouds
Yana Pushkar
Yana Pushkar
11 min
No image available
21 Nov 2023
How-to Guides and Tutorials
How to Get Listed on Salesforce AppExchange
Yana Pushkar
Yana Pushkar
12 min
No image available
14 Nov 2023
Salesforce development
20 Questions to Ask Your Potential Salesforce Implementation Partner
Andrii Kliuchka
Andrii Kliuchka
12min
Cover and internal images for blog post the role of communication in outsourcing teams
07 Nov 2023
Salesforce development
Mastering Communication: Strategies for Collaborating with Salesforce Development Outsourcing Team
Pavel Vehera
Pavel Vehera
13 min
Tips for choosing the right salesforce consulting partner
31 Oct 2023
Salesforce development
How to Choose the Right Salesforce Consulting Partner?
Pavel Vehera
Pavel Vehera
11 min
1 (1)
24 Oct 2023
Salesforce development
How to Build an App for Salesforce AppExchange
Yana Pushkar
Yana Pushkar
14 min
36
02 Aug 2023
Salesforce Implementation: Main Challenges and Best Practices
Yana Pushkar
Yana Pushkar
14 min
image (1)
30 Jul 2023
All Whats and Whys of Ecommerce Automation With the Power of Salesforce
Alina
Alina
4 min
1
20 Jul 2023
CI/CD: Transforming Salesforce Development with DevOps
Alina
Alina
16min
33
31 May 2023
How and Why to Use Salesforce for Nonprofits?
Alina
Alina
6min
1
27 Apr 2023
Main Benefits of Classic to Lightning Migration
Alina
Alina
4min
1
27 Apr 2023
Salesforce Sales Cloud from A to Z
Alina
Alina
6min
1
30 Mar 2023
Salesforce Licenses: How to Understand and Choose?
Alina
Alina
6min
1
04 Mar 2023
What is Salesforce Product Development Outsourcer (PDO)?
Yana Pushkar
Yana Pushkar
5min
1
25 Jan 2023
CMS Hub: The Guide to Managing Your Website
Kristina
Kristina
10min
1
06 Dec 2022
5 Examples of the Best CRM for Nonprofit Organizations
Alina
Alina
5min
1
04 Nov 2022
What Is Hybrid Work, And How to Make It Work?
Alina
Alina
5min
1
24 Oct 2022
Social Media CRM, or How to Get Closer to Your Customers
Alina
Alina
4min
1
27 Sep 2022
Hows, Whys, and Whats of AI in CRM
Alina
Alina
4min
1
30 Aug 2022
What is Beneficial in CRM for Nonprofits?
Kristina
Kristina
7min
1
05 Aug 2022
Salesforce Security in Plain Words
Alina
Alina
7min
1
20 Jul 2022
How to Manage Remote Teams Without Controlling
Synebo
Synebo
9min
1
11 May 2022
How to Reduce Customer Churn Using Salesforce?
Kristina
Kristina
14 min
1
08 Apr 2022
We Help Ukrainians Take the Salesforce Developer Course
Kristina
Kristina
4min
1
24 Jan 2022
Hybrid App Development: Top 3 Frameworks for 2022
Synebo
Synebo
5min
2
17 Dec 2021
Ecommerce Business Automation: the Ultimate Guide for 2022
Kristina
Kristina
19min
1
02 Dec 2021
How to Choose a CRM System for Your B2B Company?
Adelina
Adelina
18min
1
10 Aug 2021
How to Find the Best Company for Developing Your Org in Salesforce
Synebo
Synebo
3min
1
29 Mar 2019
4 Reasons Why You Shouldn’t Be Afraid of Outsourcing Software Development
Synebo
Synebo
4min
1
28 Jul 2018
3 Steps for Salesforce App Development Lifecycle
Synebo
Synebo
4min
phone