This repo contains both the starter kit with content items and required configuration files.
This kit is pre-wired for edge-side rendering for Sitecore JSS and is created to fast track the activation of Uniform Optimize capability added to your Sitecore JSS solution.
You can also use this kit to start a vanilla project, simply remove everything from /src/components
and adjust the Sitecore site name from uniform-jss-kit
to whatever you want and get cracking.
- Node.js v16.17 (LTS) is installed
- Sitecore 9.3+ instance available with Sitecore JSS installed and configured.
- "Uniform for Sitecore v5" installed and configured on your Sitecore instance. Check out these docs for more info.
- Install the Sitecore package with the starter kit items from
/sitecore/App_Data/packages
folder (optional). - Create Sitecore API key as per Sitecore JSS documentation here.
- Make sure to install and configure Uniform for Sitecore connector on your Sitecore instance.
- Add
NPM_TOKEN
environment variable with the value we provided you with. npm install --legacy-peer-deps
jss setup
and follow the steps Sitecore JSS requires and use the API key you created during the Pre-requisites step above.jss deploy config
to deploy the application config from/sitecore/config
folder into your Sitecore instance.npm run build
to build the app.npm start
to start the app in connected mode.
- Install
@cloudflare/wrangler
npm package
npm i @cloudflare/[email protected] -g
- Create a Cloudflare account: https://dash.cloudflare.com/login
- Create a Cloudflare API token:
- Follow the link: https://dash.cloudflare.com/profile/api-tokens
- Select "Create Token" button
- Select "Edit Cloudflare Workers" among API token templates
- In a new "Create Token" window don't change any Permissions (they are predefined correctly); indicate "All Accounts" in Account Resources section and "All Zones" in Zone Resources section. Client IP Address Filtering section can be skipped.
- add
| Zone | Cache Purge | Purge |
permission - Press "Continue To Summary" and then "Create Token" buttons.
- IMPORTANT! Copy and save your API Token somewhere. It only shown once after the initial setup.
- Finalize the worker setup: navigate to the Workers page (Click Workers link on the right pane on the Cloudflare main page) and click the Setup button next to your worker name; Choose to proceed with free account on the next page
-
Ensure you have Cloudflare site.
-
Add environment variables to
.env
file:CF_ACCOUNT_ID
- Cloudflare account IDCF_API_TOKEN
- Cloudflare API tokenCF_ZONE_ID
- Zone ID of the Cloudflare siteCF_WORKER_NAME
- Preferable worker nameCF_WORKER_ROUTE
- Worker routes pattern
Template:<CLOUDFLARE_SITE_DOMAIN>/*
Example:custom.site.com/*
-
npm run cloudflare:deploy-worker
-
Ensure worker has been deployed and assigned to defined url
- Go to
Rules
tab (https://dash.cloudflare.com/{account-id}/{cloudflare-site-name}/rules) - Add new page rule with the next variables for
<CLOUDFLARE_SITE_DOMAIN>/*
url pattern:SSL
= FullCache Level
= Cache EverythingEdge Cache TTL
= 2 hours
Cleanup Cloudflare cache after Sitecore publish
-
Make sure provided API Token has permission to purge cache otherwise you'll be getting the
Authentication failed
error on cache purge requests:
Go to https://dash.cloudflare.com/profile > switch to the 'API Tokens' tab > call menu for your token (click '...' next to it) and choose 'Edit'. In Permissions section make sure you have following permission:| Zone | Cache Purge | Purge |
-
Enable config:
esi-jss.Uniform.PurgeCache.Cloudflare.config.disabled
and updatepurgeService
variables:- update
apiToken
with created Cloudflare API token - update
zoneId
with Zone ID of the Cloudflare site - update
hostNames
with public url of the Cloudflare site
- update
Note: Remove or update the robots.txt
if you going to use this kit in production