Forem: Luke Secomb

Local LWC Development with real @AuraEnabled method calls

Luke Secomb — Wed, 05 Feb 2025 00:06:12 +0000

Introduction

This article explains how to call real @AuraEnabled Apex methods from your local development server. We will use LWC Garden as our server of choice. However, this approach can also work within a vanilla LWR setup if required.

Let's begin with an example Apex class to get us started:

public with sharing class AccountController {

  /**
   * @description Method to fetch Accounts by a list of Ids
   * @param accountIds Account Ids to query for
   * @return List of matching Accounts
   */
  public static List<Account> getAccountsById(Set<Id> accountIds) {
    return accountIds.size() == 0 ? new List<Account>() : [
      SELECT Id, Name
      FROM Account 
      WHERE Id IN :accountIds
    ];
  }

  /**
   * @description Method to fetch Accounts by a list of Names
   * @param accountNames Account Names to query for
   * @return List of matching Accounts
   */
  public static List<Account> getAccountsByName(Set<String> accountNames) {
    return accountIds.size() == 0 ? new List<Account>() : [
      SELECT Id, Name
      FROM Account 
      WHERE Name IN :accountNames
    ];
  }
}

Folder Structure

Here’s a quick look at the folder structure:

.
├── __mocks__/
│   └── @salesforce/
│       └── apex/
│           ├── AccountController.js (or the following two files)
│           ├── AccountController.getAccountsById.js
│           └── AccountController.getAccountsByName.js
├── force-app/
│   └── main/
│       └── default/
│           ├── apex/
│           │   └── AccountController.cls
│           └── lwc/
│               └── accountManager/
│                   ├── accountManager.css
│                   ├── accountManager.html
│                   ├── accountManager.js
│                   └── accountManager.js-meta.xml
├── package.json
├── lwr.config.json (or lwc.config.json)
└── sfdx-project.json

Depending on approach, you may only require a single mock file for the Apex class (e.g. AccountController.js) instead of one file per method. Checkout the @lwc-garden/utils documentation if you're unsure.

Configuration

Before diving into calling real @AuraEnabled methods, let's review a simpler form of method mocking. Depending on your use case, this might be enough to get you running locally.

We'll focus on the vanilla approach for now, which requires creating a new JavaScript file for each Apex Method. If you'd prefer a single file per Apex class, checkout the @lwc-garden/utils documentation.

lwr.config.json

{
  "modules": [
    {
      "name": "@salesforce/apex/AccountController.getAccountsById",
      "path": "./__mocks__/@salesforce/apex/AccountController.getAccountsById.js"
    },
    {
      "name": "@salesforce/apex/AccountController.getAccountsByName",
      "path": "./__mocks__/@salesforce/apex/AccountController.getAccountsByName.js"
    }
  ]
}

This configuration maps standard on-platform imports to your local mock JavaScript files.

Writing the Apex Mocks

Now we'll configure our mocks:

// ./__mocks__/@salesforce/apex/AccountController.getAccountsById.js
export default function getAccountsById() {
  return [
    {
      Id: "001dL00000jNfdgQAC"
      Name: "Google Inc."
    },
    {
      Id: "001dL00000jOfdhQAC"
      Name: "Google Inc."
    }
  ]
}

// ./__mocks__/@salesforce/apex/AccountController.getAccountsByName.js
export default function getAccountsByName() {
  return [
    {
      Id: "001dL00000jNfdgQAC"
      Name: "Google"
    },
    {
      Id: "001dL00000jOfdhQAC"
      Name: "Microsoft"
    }
  ]
}

You may choose to add some smarts to your mocks if you wish. Here is an example:

// ./__mocks__/@salesforce/apex/AccountController.getAccountsById.js
const ACCOUNTS = [
  {
    Id: "001dL00000jNfdgQAC"
    Name: "Google"
  },
  {
    Id: "001dL00000jOfdhQAC"
    Name: "Microsoft"
  }
]

export default function getAccountsById({ accountIds }) {
  return ACCOUNTS.filter((item) => accountIds.contains(item.Id))
}

Calling real `@AuraEnabled` Apex Methods

To call real Apex methods, we need a local server to bypass browser-based CORS errors. We'll use Hono, though other frameworks (e.g., Express, Koa, Fastify) can also work.

Hono Configuration

To get started install the following packages:

pnpm add hono @hono/node-server
pnpm add -D @types/node tsx

Once installed, add a new entry to your package.json "scripts" object:

"scripts": {
  "run-server": "tsx watch server.ts"
},

Create a server.ts file to hold our Hono configuration:

// server.ts
import { Hono } from 'hono'
import { cors } from 'hono/cors'
import { serve } from '@hono/node-server'

const app = new Hono()

app.use('/proxy', cors())

app.all('/proxy', async (c) => {
  const url = c.req.query('q')

  const res = await fetch(url, {
    method: c.req.method,
    headers: c.req.raw.headers,
    body: c.req.raw.body,
    duplex: 'half',
  })
  const headers = { ...res.headers }
  const newResponse = new Response(res.body, { headers })
  return newResponse
})

const port = 3003
console.log(`Server is running on http://localhost:${port}`)

serve({
  fetch: app.fetch,
  port,
})

To run the Hono server, run the pnpm run-server command we added above.

To test this is running correctly, open your browser and go to http://localhost:3003/proxy?q=https://example.com. If you are greeted with some HTML, it means the server is running correctly.

Editing the Apex Mocks

For these mocks, we'll use the @lwc-garden/utils package to allow us to define all our methods within a single JavaScript file.

pnpm add @lwc-garden/utils

Once installed, we will need to edit our lwr.config.json file to tell LWC Garden where to find our apex methods.

lwr.config.json

"hooks": [
  [
    "@lwc-garden/utils/resolvers/apex.ts",
    {
      "paths": ["__mocks__/@salesforce/apex/"]
    }
  ],
]

For more information on @lwc-garden/utils configuration, including extra configuration for Static Resources and Custom Labels, checkout the LWC Garden documentation.

Now that we have our mapping configured, lets create our JavaScript file to call our @AuraEnabled apex.

Before we jump in, we'll need to find two things.

SALESFORCE_URL: This is your Experience Cloud BASE URL. e.g. https://company--dev.sandbox.my.site.com/mycommunity
CLASS_NAME_ID: This is a unique Id that is assigned to each Apex Class. This can be found by inspecting the request payload when calling the method on-platform.

// __mocks__/@salesforce/apex/AccountController.js
const PROXY_BASE_URL = 'http://localhost:3003'
const WEBRUNTIME_URL = '/webruntime/api/apex/execute'

// TODO: REPLACE THIS
const SALESFORCE_URL = `https://company--dev.sandbox.my.site.com/mycommunity`

// TODO: REPLACE THIS
const CLASS_NAME_ID = '@udd/01p8r000008CmFZ'

const BASE_URL = `${PROXY_BASE_URL}/proxy?q=${SALESFORCE_URL}/${WEBRUNTIME_URL}`

const fetchHelper = async (methodName, params, isWire) => {
  const myHeaders = new Headers()
  myHeaders.append('Content-Type', 'application/json')
  myHeaders.append(
    'Cookie',
    'CookieConsentPolicy=0:1; LSKey-c$CookieConsentPolicy=0:1'
  )

  const raw = JSON.stringify(
    {
      namespace: '',
      classname: CLASS_NAME_ID,
      method: methodName,
      isContinuation: false,
      params,
      cacheable: false,
    }
  )

  const response = await fetch(
    `${BASE_URL}?language=en-US&asGuest=true&htmlEncode=false`,
    {
      method: 'POST',
      headers: myHeaders,
      body: raw,
      redirect: 'follow',
    }
  )

  const json = await response.json()

  if (json.cacheable) {
    return {
      data: json.returnValue,
      error: undefined,
    }
  } else {
    return json.returnValue
  }
}

export const getAccountsById = async (params) =>
  fetchHelper('getAccountsById', params)

export const getAccountsByName = async (params) =>
  fetchHelper('getAccountsByName', params)

Wrapping up

And thats it, boot up your local dev server using npx @lwc-garden/core dev and your apex methods will now be calling your actual Salesforce Org.

Lightning Web Components: Custom Nested Components

Luke Secomb — Mon, 20 Mar 2023 02:15:28 +0000

Lightning Web Runtime, or LWR for short was released back in Spring 21 (v51.0). Even before the release of LWR, most developers dreamed of being able to build custom nested components. We could see that OOTB (Out Of The Box) components could use them (see Tabs component).

Salesforce recently released the ability to build custom LWCs with child <slot/>'s, to allow nesting of components. Nested LWCs allow you to compose multiple components together into a single component. The child components maintain their own life cycle and can communicate with each other through events, making it easy to create flexible and dynamic apps.

Before continuing, Aura based Communities are (sadly) not supported. So if you're currently using them it might be time to make the switch to LWR.

Code Example

Enough talk, lets jump into the code and see the magic happen.

HTML

We'll start by creating the HTML template to hold our <slot/>'s.

<template>
  <template if:false={isAura}>
    <div class="container">
      <div>
        <slot name="region1"></slot>
      </div>
      <div>
        <slot name="region2"></slot>
      </div>
      <div>
        <slot name="region3"></slot>
      </div>
    </div>
  </template>
</template>

JavaScript

Now lets have a look at the JavaScript. The important part (or magic) here is the @slot definitions in the comment directly above the LWC export. Without these definitions, the dynamic components will not work.

The isAura check also ensures this component shows a warning in the experience builder when it is being used from within an Aura based community.

import { LightningElement } from 'lwc'

/**
 * @slot region1
 * @slot region2
 * @slot region3
 */
export default class NestedLWCs extends LightningElement {
  get isAura() {
    return window['$A'] !== undefined && window['$A'] !== null
  }
}

Metadata XML

Make sure your .xml file is setup to be available in the experience builder. The key values are setting isExposed to true and including both lightningCommunity__Page and lightningCommunity__Default as targets.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>57.0</apiVersion>
  <isExposed>true</isExposed>
  <masterLabel>Nested LWCs</masterLabel>
  <description>Nested LWC magic</description>
  <targets>
    <target>lightningCommunity__Page</target>
    <target>lightningCommunity__Default</target>
  </targets>
</LightningComponentBundle>

Experience Builder

Now lets open up the Experience Builder and see our custom LWC in action.

We can also nest components within other nested components. I am not aware of any limitation here. I was able to place up to 10 levels deep without any issues, noting theses are very barebones test LWCs. More complex LWCs may start affecting performance.

Wrapping Up

In summary, nested LWCs provide a powerful and flexible way for developers to create custom components that can be composed of multiple other components, making it easier to build dynamic and reusable apps on the Experience Cloud platform.

Building Custom Mixins in Lightning Web Components (LWC)

Luke Secomb — Thu, 09 Mar 2023 22:44:37 +0000

Mixins (or Abstract subclasses) are templates for classes that allow us to write generic functionality to be reused. Given the nature of classes, it is not possible to have more than one superclass. Mixins allow us to pass the base class as a property and unlock nested inheritance.

JavaScript Mixin Usage

Before we dive into an LWC example, lets look at how we can use mixins in a plain javascript environment.

Firstly, we must create a mixin function that our classes can use. This should be a piece of generic functionality that multiple classes can utalise.

// A simple Mixin method
// adds the `windowSize()` method to classes that implement this mixin
export const WindowSizeMixin = (BaseClass) =>
  class extends BaseClass {
    get windowSize() {
      return {
        width: window.innerWidth,
        height: window.innerHeight,
      }
    }
  }

import { WindowSizeMixin } from './windowSizeMixin'

// Implementing the `WindowSizeMixin` gives us access to the
// `this.windowSize` getter
class Header extends WindowSizeMixin(BaseClass) {
  getWindowSize() {
    return this.windowSize
  }
}

In the above example, calling the getWindowSize() function on our Header class will return the object defined in the WindowSizeMixin.

LWC Mixin Usage

Now we have a basic understanding of how mixins work in JavaScript, lets look at how the concept applies to LWC. Using mixins in LWC is almost identical with one difference, your BaseClass should be LightningElement (or another class that has extended LightningElement).

We'll assume the same above mixin source code that we used above (WindowSizeMixin) but instead our implementation will be a LWC component.

// don't forget to import LightningElement, we need to extend it as our base class
import { LightningElement } from 'lwc'

// assume our mixin has been created as a separate LWC to be used by multiple components
import { WindowSizeMixin } from 'c/windowSizeMixin'

// LWC expects a default export of our `LightingElement` extended component
export default class Header extends WindowSizeMixin(LightningElement) {
  getWindowSize() {
    // available via the WindowSizeMixin
    return this.windowSize
  }
}

Stacking Mixins

The beauty of mixins is that you can use more than one. This can be useful for creating smaller snippet mixins for similar functionality that is used across multiple LWCs.

Lets have a quick look at an example. We will create another mixin method.

export const DateMixin = (BaseClass) =>
  class extends BaseClass {
    // a function that returns the current date as an object
    getDate() {
      const date = new Date()
      return {
        day: date.getDate(),
        month: date.getMonth() + 1,
        year: date.getFullYear(),
      }
    }
  }

Lets update our LWC example from above to include the new DateMixin.

// don't forget to import LightningElement, we need to extend it as our base class
import { LightningElement } from 'lwc'

// assume our mixins have been created as a separate LWC to be used by multiple components
import { WindowSizeMixin } from 'c/windowSizeMixin'
import { DateMixin } from 'c/dateMixin'

// LWC expects a default export of our component
// we can stack mixins here
export default class Header extends DateMixin(
  WindowSizeMixin(LightningElement)
) {
  getWindowSize() {
    // available via the WindowSizeMixin
    return this.windowSize
  }
  getCurrentDate() {
    // available via the DateMixin
    return this.getDate()
  }
}

Using `@wire` in a Custom Mixin

@wire is a service that streams immutable data to the component. This is heavily used in on platform development and a must when it comes to building dynamic components.

Lets have a look at a simple example mixin that uses the standard getRecord wire method.

import { wire } from 'lwc'
import { getRecord } from 'lightning/uiRecordApi'

export const AccountWireMixin = (BaseClass) =>
  class extends BaseClass {
    // explicitly not setting recordId so that the consuming
    // component can choose how it wishes to implement it (e.g @api, get/set)
    // recordId

    // this can be dynamically changed by the implementing class if needed
    // this array acts as a default field list
    fieldRef = ['Account.Id', 'Account.Name', 'Account.Phone']

    @wire(getRecord, {
      recordId: '$recordId',
      fields: '$fieldRef',
    })
    wiredGetRecord(response) {
      // you can choose to either set the data to a variable for you component to consume
      // or fire off a function that your consuming component can override.
      // for this example, we will call a method
      this.handleWiredAccount(response)
    }

    /**
     * This method should be overriden by the consuming component
     */
    handleWiredAccount = (response) => {
      const { error, data } = response

      if (error) {
        // TODO: handle errors
      } else if (data) {
        // TODO: handle success
      }
    }
  }

We can update our above example and stack the AccountWireMixin on top.

// don't forget to import LightningElement, we need to extend it as our base class
import { LightningElement } from 'lwc'

// assume our mixins have been created as a separate LWC to be used by multiple components
import { WindowSizeMixin } from 'c/windowSizeMixin'
import { DateMixin } from 'c/dateMixin'
import { AccountWireMixin } from 'c/accountWireMixin'

// LWC expects a default export of our component
// we can stack mixins here
export default class Header extends AccountWireMixin(
  DateMixin(WindowSizeMixin(LightningElement))
) {
  // ... existing code

  // override the shell method defined in the AccountWireMixin
  handleWiredAccount = (response) => {
    const { error, data } = response

    if (error) {
      // TODO: handle errors
      console.error('Oh no, something went wrong ', error)
    } else if (data) {
      // TODO: handle success
      console.log('We have account data, yay ', data)
    }
  }
}

Wrapping up

In conclusion, mixins are an incredibly useful tool in LWC development. They allow us to write generic, reusable functionality that can be shared between multiple components. By stacking multiple mixins, we are able to compose complex components from smaller, focused mixins. Mixins help keep our code DRY (Don't Repeat Yourself) and maintainable.

Salesforce Trekken: Salesforce CMS Migration Tool built with Tauri, React, TailwindCSS & Vite

Luke Secomb — Fri, 13 Jan 2023 15:56:50 +0000

The Salesforce CMS data migration experience is lacking. There is no bulk export, and there is no sorting/filtering of content and you are sent an email link instead of being able to directly download the zip file.

Salesforce Trekken aims to rethink the Salesforce CMS migration experience. Using modern web technologies and thoughtful a user experience, migrating Salesforce CMS data has never been easier.

How does it work?

Salesforce Trekken allows users to authenticate using one of two methods:

The sfdx cli
Access Token (and Instance URL)

The Salesforce REST API is used to fetch CMS Channels and the CMS Content after a specific channel has been selected.

Features

Multiple Authentication Methods (sfdx cli or ACCESS_TOKEN)
Channel Selection: Choose the right CMS Channel to export data from
Feature Rich Export Table
Bundled Zip file export, ready to be imported into your target org.

Walkthrough

Select Your Authentication Method

Select An Org

Select A CMS Channel

Search/Filter/Sort and Select Content

Select An Output Folder

and whether to include images as part of the export.

Success

Either open the source folder or start over.

Your content is now ready to import into your target org.

If you are working with cms_image, make sure you import your images zip file first

Closing

Now you've seen the powers of Salesforce Trekken and its improved user experience compared to the standard salesforce experience.

Want to find out more and/or download, checkout the Salesforce Trekken site

Spotify Playlist Backup using Github Actions

Luke Secomb — Thu, 01 Dec 2022 13:55:04 +0000

Platforms come and go, and Spotify most likely wont be around forever. What would you do if you woke up tomorrow and Spotify was gone. I know I wouldn't be too happy, after spending countless hours carefully curating well over 200 playlists.

So, to save your playlists from being erased from the internet forever, lets create a small python script to back them up. This post outlines the steps to configue and a basic walkthrough of my spotify-playlist-backup project.

Spotify Developer Application

Before we can jump into the code we need to setup our own Spotify Developer Application. This will require you to have a Spotify account (a free account should work). Once logged in, create a new application and save the CLIENT_ID and CLIENT_SECRET for later. Make sure you set http://localhost:3000/callback as a return url for your application.

Into the code

Clone the spotify-playlist-backup repo and create a new .env file. Copy and paste in the following code snippet and replace the values with your configuration.

# .env file
# Values from your Spotify Developer Application
SPOTIFY_CLIENT_ID=laboriselitutenimdoculpa
SPOTIFY_CLIENT_SECRET=laboriselitutenimdoculpa

# Your Spotify Username
SPOTIFY_USERNAME=12345678910

# Your Spotify Password
SPOTIFY_PASSWORD=abcdefghijklmnopqrstuvwxyz

# Comma separated list of usernames of playlist authors.
# This allows you to back up other peoples playlists (that you follow) if you want.
# if left blank, all of your followed/created playlists will be backed up.
SPOTIFY_OWNER_IDS=snoopdogg,drdre,spotify

Run the script

Once you have setup the .env file, you're ready to run the script.

python script.py

This assumes you already have python installed.

Yes, it is that easy. After running the above script you will have a local copy of all your playlist data in beautiful json format.

Github Action setup

Before your Github Action will run successfully, you must setup the above .env variables correctly within the repo.

Make sure your fork is a private repository

Cron Job

Lets go one step further and set our Github Action to run once a week. By default, the CRON Job Github Action is disabled. To enable this within your repo, open the .github/workflows/python-app.yml file and uncomment the schedule code block.

on:
  schedule:
    # scheduled to run each week at 3am on a Tuesday
    - cron: '0 3 * * 2'
  workflow_dispatch:
    inputs:
      logLevel:
        description: 'Log level'
        required: true
        default: 'warning'
        type: choice
        options:
          - info
          - warning
          - debug

You can use the crontab tool to calculate when and how often you want to run the Github Action.

Remove duplicate Objects within an Array by Object key.

Luke Secomb — Sun, 16 Aug 2020 13:21:44 +0000

A quick and easy way to remove duplicate Objects within an Array of Objects by key.

function removeDuplicateObjectsByKey(array, fieldToDuplicateCheck) {
  const newArray = []
  const arrayKeys = []

  array.forEach((item) => {
    // check if we don't already have the value within the arrayKeys array
    if (!arrayKeys.includes(item[fieldToDuplicateCheck])) {
      // push this value to the arrayKeys array
      arrayKeys.push(item[fieldToDuplicateCheck])
      // push this object to the newArray array
      newArray.push(item)
    }
  })

  // return the newArray with the filtered out duplicate objects
  return newArray
}

// A test array of objects. In a real world situation you would have more than just the 'name' key on the objects
const initialArrayOfObjects = [
  {
    name: '🐑',
  },
  {
    name: '🐑',
  },
  {
    name: '🐫',
  },
  {
    name: '🦕',
  },
  {
    name: '🦕',
  },
]

// will filter out the duplicates by the 'name' field
let removeDuplicateObjects = removeDuplicateObjectsByKey(initialArrayOfObjects, 'name')
// [ { name: '🐑' }, { name: '🐫' }, { name: '🦕' } ]

Github Gist

Cover Photo Credits to Charl Folscher

[SOLVED] ACF not saving data after WP 5 update

Luke Secomb — Mon, 04 May 2020 00:10:37 +0000

If in doubt, duplicate your ACF Field group.

In all seriousness, this should solve any issues regarding not being able to save posts with nested ACF fields & repeaters.

If this does not work. Try adjusting the WP DB table wp_options -> option_name to a lower version. This will trigger the ACF DB update if needed.

Cover image credits: @steadyhandco

SFDX: Good to know

Luke Secomb — Thu, 02 Jan 2020 02:31:53 +0000

How the heck do I set up a scratch org using sfdx? Well, you're in the right place.

Firstly, you will need to have SFDX (Salesforce CLI) installed and VS Code. You will also need your own Salesforce DevHub instance setup (need a hand with setting up your dev hub? check out this trailhead unit.

Create a Salesforce DX Project

The second step is to create a (SF)DX project.

sfdx force:project:create -n YOUR_PROJECT_NAME

Auth your DevHub

Next, we need to connect your DevHub with your new project

sfdx force:auth:web:login -d -a ALIAS_FOR_YOUR_DEV_HUB -r https://test.salesforce.com

-d sets this as the default Dev Hub.
-a sets this alias for the org.
-r sets the login URL for the org.

If you have already auth'd, set your default username using sfdx force:config:set defaultdevhubusername=lukesfakeemail@force.com

Login To Sandboxes

In addition to DebHubs, we can also connect to standard salesforce Sandboxes. This can be handy when it comes to pulling components into your scratch org

sfdx force:auth:web:login -r https://test.salesforce.com -a ALIAS_FOR_YOUR_SANDBOX

Remember, don't use the -d flag. If you do, the CLI thinks the org is your Dev Hub, and then you'll see an error when you try to create a scratch org.

If force:auth:web:login isnt working, use sfdx force:auth:device:login -r https://test.salesforce.com -a YOUR_ORG_ALIAS instead.

Rename (add) Alias

sfdx force:alias:set NEW_ALIAS_FOR_YOUR_SANDBOX=current@sandbox.user.com
sfdx force:alias:set OLD_ALIAS_FOR_YOUR_SANDBOX=

Logout of Sandboxes

logout/remove the sandbox from the sfdx force:org:list

sfdx force:auth:logout -u ALIAS_FOR_YOUR_SANDBOX

Create your scratch org

Now for the fun part, creating your scratch org.

if you want to set the scratch org name, or adjust other config options, edit the ./config/project-scratch-def.json file before progressing

sfdx force:org:create -s -v ALIAS_OF_YOUR_DEBHUB -f config/project-scratch-def.json -a ALIAS_FOR_SCRATCH_ORG -d 30 -w 10

-v optional param to choose your DevHub (not needed if you have a default DevHub set)
-s sets this as the default sratch org
-f sets the location for the config file (to build the org)
-a sets the alias for the scratch org
-d sets the expiry to 30 days
-w sets the wait time to 10mins

If you already scratch'd an org sfdx force:config:set defaultusername=lukesfakeemail@force.com

View Scratch Org Config/Details

sfdx force:org:display -u SCRATCH_ORG_ALIAS

Generate Password Scratch Org

sfdx force:user:password:generate -u SCRATCH_ORG_ALIAS

Delete Scratch Org

sfdx force:org:delete -u SCRATCH_ORG_ALIAS

Assign Permission Set

Before you can start pushing code, we have to set up some permission sets to allow us.

sfdx force:user:permset:assign -n NAME_OF_PERMISSION_SET

most likely named SalesConsoleUser on default scratch orgs

Fetch all Metadata from an Org (Metadata API)

NOTE: we are using the sfdx-ext plugin which can be found here

Fetch the Metadata

sfdx ext:mdapi:retrieve -b -i -n -h -f -u SOURCE_ORG_NAME

Convert the source to Metadata API (instead of Source API)

sfdx ext:mdapi:convert --sourcedirectory src --targetdirectory ./

Clean up the Source API folder

rm -rf src

If any of this falls over, you may need to either update the sfdx-ext plugin or remove un-parsable files.

Deploy code back to DevHub

Deploy all of type

sfdx force:source:deploy -m ApexPage, ApexClasses, LightningComponentBundle -u ALIAS_FOR_YOUR_DEV_HUB

Deploy specific component by path

sfdx force:source:deploy -p force-app/main/default/lwc/SINGLE_COMPONENT_NAME -u ALIAS_FOR_YOUR_DEV_HUB

Fetch / Pull Data

Retrieve All ApexClasses, ApexPages, LWC's

sfdx force:source:retrieve -m ApexClass, ApexPage, LightningComponentBundle -u ALIAS_FOR_YOUR_DEV_HUB

Metadata Ref

Create / Import Data

data can be retrieved from a sandbox using sfdx force:source:retrieve -m CustomObject -u SANDBOX_SOURCE_ORG

Create Data

Specify the Object type and the fields 'n values

sfdx force:data:record:create -s Account -v "Name='Marriott Marquis' BillingStreet='780 Mission St' BillingCity='San Francisco' BillingState='CA' BillingPostalCode='94103' Phone='(415) 896-1600' Website='www.marriott.com'"

Export Data

Using SQL to JSON data

sfdx force:data:tree:export -q "SELECT Name, BillingStreet, BillingCity, BillingState, BillingPostalCode, Phone, Website FROM Account WHERE BillingStreet != NULL AND BillingCity != NULL and BillingState != NULL\" -d ./data

Import Data

sfdx force:data:tree:import --sobjecttreefiles data/Account.json

Create an Apex Class

sfdx force:apex:class:create -n YourControllerName -d force-app/main/default/classes

`config/project-scratch-def.json`

Disable Lightning Experience caching

"settings": {
  "orgPreferenceSettings": {
    "s1EncryptedStoragePref2": false
  }
}

Disabling secure and persistent browser caching has a significant negative performance impact on Lightning Experience. Always enable the setting in production orgs.

Useful Commands

See config options sfdx force:config:set -h
See all commands sfdx force:doc:commands:list
Refresh SObject cache for VS Code intellisense sfdx sobject definitions refresh -u SCRATCH_ORG_USERNAME

SFDX Good to know - Scratch Orgs (PART 1)

Luke Secomb — Tue, 17 Dec 2019 11:00:13 +0000

How the heck do I set up a scratch org using sfdx? Well, you're in the right place.

Preparation

Create a Salesforce DX Project

Ok, now we are setup lets get into it. The first step is to create an (SF)DX project.

sfdx force:project:create -n YOUR_PROJECT_NAME

Auth your DevHub

Next, we need to connect our DevHub with the new project

sfdx force:auth:web:login -d -a ALIAS_FOR_YOUR_DEV_HUB

-d sets this as the default Dev Hub.
-a sets this alias for the org. (strongly recommended)

If you have already auth'd, set your default username using sfdx force:config:set defaultdevhubusername=lukesfakeemail@force.com

Login To Sandboxes

In addition to DebHubs, we can also connect to standard Salesforce Sandboxes. This can be handy when it comes to pulling components into your scratch org

sfdx force:auth:web:login -r https://test.salesforce.com -a ALIAS_FOR_YOUR_SANDBOX

You may also choose to change the default https://test.salesforce.com url to a custom domain if you have set one up.

Remember, don’t use the -d flag. If you do, the CLI thinks the org is your Dev Hub, and then you’ll see an error when you try to create a scratch org.

Create your scratch org

Now for the fun part, creating your scratch org.

if you want to set the scratch org name, or adjust other config options, edit the ./config/project-scratch-def.json file before progressing. Later in this series we will properly cover the cool things we can achieve using the project-scratch-def.json file.

sfdx force:org:create -s -f config/project-scratch-def.json -a ALIAS_FOR_SCRATCH_ORG -d 30 -w 10

-s sets this as the default sratch org
-f sets the location for the config file (to build the org)
-a sets the alias for the scratch org
-d sets the expiry to 30 days
-w sets the wait time to 10mins

If you already scratch'd an org sfdx force:config:set defaultusername=lukesfakeemail@force.com

Assign Permission Set

Before you can start pushing code, we have to set up some permission sets to allow us.

sfdx force:user:permset:assign -n NAME_OF_PERMISSION_SET

most likely named SalesConsoleUser on default scratch orgs

And there we have it, you've successfully setup a new SFDX Project and connected it to a scratch org. In part 2 we will check out how we can push

TL:DR Commands

create new sfdx project
sfdx force:project:create -n YOUR_PROJECT_NAME

auth a devhub
sfdx force:auth:web:login -d -a ALIAS_FOR_YOUR_DEV_HUB

create a new scratch org
sfdx force:org:create -s -f config/project-scratch-def.json -a ALIAS_FOR_SCRATCH_ORG -d 30 -w 10

assign a permission set
sfdx force:user:permset:assign -n SalesConsoleUser

CSS Syntax Highlighting in IntelliJ

Luke Secomb — Thu, 20 Jun 2019 04:51:47 +0000

Out of the box IntelliJ has no syntax highlighting for *.css files.

Nothing a simple settings change can't fix.

Settings -> Editor -> File Types and change the *.css file association from CSS (syntax Highlighting Only) to CSS Files (Improved Syntax Highlighting.

Use Custom HTML Attribute's in TypeScript

Luke Secomb — Thu, 13 Jun 2019 14:31:50 +0000

Photo by Ningyu He on Unsplash

Installing different packages and frameworks means you run into some interesting problems with TypeScript. One recently was using custom HTML Attributes on DOM elements.

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    // extends React's HTMLAttributes
    custom?: string;
  }
}

This piece of code solved my issue, and allows you to add any custom HTML attributes when using TypeScript.

<div custom="no_ts_errors">
  your content here
</div>

SASS in Lightening Web Components? (Salesforce Devs)

Luke Secomb — Thu, 13 Jun 2019 14:23:57 +0000

Is it possible to (nicely) use SASS (or similar css compiler) within the Salesforce lightening web components ecosystem?

And no, Salesforce Lightning Design System is not the answer.

Forem: Luke Secomb

Local LWC Development with real @AuraEnabled method calls

Introduction

Folder Structure

Configuration

Writing the Apex Mocks

Calling real @AuraEnabled Apex Methods

Hono Configuration

Editing the Apex Mocks

Wrapping up

Lightning Web Components: Custom Nested Components

Code Example

HTML

JavaScript

Metadata XML

Experience Builder

Wrapping Up

Building Custom Mixins in Lightning Web Components (LWC)

JavaScript Mixin Usage

LWC Mixin Usage

Stacking Mixins

Using @wire in a Custom Mixin

Wrapping up

Salesforce Trekken: Salesforce CMS Migration Tool built with Tauri, React, TailwindCSS & Vite

How does it work?

Features

Walkthrough

Select Your Authentication Method

Select An Org

Select A CMS Channel

Search/Filter/Sort and Select Content

Select An Output Folder

Success

Closing

Spotify Playlist Backup using Github Actions

Spotify Developer Application

Into the code

Run the script

Github Action setup

Cron Job

Remove duplicate Objects within an Array by Object key.

[SOLVED] ACF not saving data after WP 5 update

SFDX: Good to know

Create a Salesforce DX Project

Auth your DevHub

Login To Sandboxes

Rename (add) Alias

Logout of Sandboxes

Create your scratch org

View Scratch Org Config/Details

Generate Password Scratch Org

Delete Scratch Org

Assign Permission Set

Fetch all Metadata from an Org (Metadata API)

Deploy code back to DevHub

Fetch / Pull Data

Create / Import Data

Create Data

Export Data

Import Data

Create an Apex Class

config/project-scratch-def.json

Useful Commands

SFDX Good to know - Scratch Orgs (PART 1)

Preparation

Create a Salesforce DX Project

Auth your DevHub

Login To Sandboxes

Create your scratch org

Assign Permission Set

TL:DR Commands

CSS Syntax Highlighting in IntelliJ

Use Custom HTML Attribute's in TypeScript

SASS in Lightening Web Components? (Salesforce Devs)

Calling real `@AuraEnabled` Apex Methods

Using `@wire` in a Custom Mixin

`config/project-scratch-def.json`