Build Fast Static Sites with Salesforce and Netlify

Your developers want to use jamstacks on Netlify to save time and money, and the rest of your business users are working in Salesforce. This article covers how to build your own CMS for dynamic sites using records in salesforce.

Data Model

Your data model will be up to your business requirements, but this pattern is one we’ve re-used a few times:

If you don’t need multiple sites or complex rules on content types (or just want to start simple) then you can start with a single object named “Content” (Content__c) with a single field named “Body” (rich text).

Exposing the data to your static site generator

This is the complex part because we have many options which should be picked based on your available skill set and how much data is being managed:

1. Create a force.com site with an unauthenticated rest API to expose just the data you need. This API call is not metered, which is where most developers stub their toes dealing with the salesforce platform. (can scale to many, many sites with many thousands of content records per site)
2. Create a Heroku app and use Heroku Connect to sync your data to a Postgres Database and then use a tool like https://hasura.io/ to create GraphQL endpoints (handles a lot more records, but Heroku Connect costs $4k per month)
3. Create a web service on the platform of your choice which will query salesforce (live via rest API or replicate data to a local database) and expose data in a way your sites need to use (like GraphQL above)

We will work on future blog posts covering each of these approaches, but if you want a developer to help you work through any of these options please come chat with us at www.cloudanswers.com

Today’s example will keep it very simple. Our setup will have only the “Content” table and only a Body field (rich text). We will use the “Content Name” as the key the developer can use to include the content on the site. Note here that we’ve even included an image in the rich text field:

To expose this data (in the simplest way possible) we are using an Unauthenticated Apex Rest Webservice hosted on a Force.com site:

As a developer, this is what you will see when doing an http get:

This is a very minimal example for illustration only. It will give you a way to edit rich text on a site, add attachments, etc. and a full system will include the full data model pictured above. However, you can also map any other object from your system to be included in your websites: Product2, Order, Case, etc.

Create a Static Site

Finally, we can start building the site. For our example, we ran the nextjs project starter tutorial to get a basic site:

Because we exposed the content from salesforce as a rest endpoint returning json, it’s very easy to use this data in static site generators like hugo, nextjs, and eleventy.

In our nextjs example, we added the following 10 lines to the bottom of the index page so when the site is built, the API will be queried and data will be populated into our template:

As soon as you save the file (assuming you’re running npm run dev) you will see salesforce content show up immediately, not even needing to reload your browser:

Conclusion

1. You now know how to get your data from Salesforce into your epicly fast jamstack sites.
2. You can see common patterns for quickly extracting key data from salesforce without adding too much complexity and maintenance overhead

Relevant Links

The example repo with the nextjs site code can be found here: https://github.com/cloudanswers/cloudanswerscms-nextjs-example

The above example site is deployed here: https://cloudanswerscms-nextjs-example.netlify.app/

Interested in doing something similar? Looking for some salesforce development help? Come chat with us at www.cloudanswers.com or contact us by phone or email at www.cloudanswers.com/contact