dc-demostore-core is a React/Material/NextJS front-end e-Commerce application, implemented with Typescript, showcasing Amplience Dynamic Media and Dynamic Content.
It includes Storybook, a visual documentation of the UI components, things like Product Lists, Banners, Blogs & Blog posts, Stores, etc.
The package also includes a Debug/X-Ray panel to help understand how the pages and components are structured, what context you are looking at the application in and the ability to click directly from the application to the related content in Amplience Dynamic Content.
dc-demostore-core is intended for DEMO PURPOSES ONLY, and not for production-optimized environments.
This demo application was developed and tested with:
- Node version
18.x - NPM version
9.x
Out of the box, dc-demostore-core may be used without needing to have an Amplience account, allowing you to experiment with API calls and Front-End customisations against an existing content base. You can simply clone this repository and it already points to a working account so that you can see:
- Live Content
- Components
- Amplience API requests
- etc.
The following commands will install dc-demostore-core on your local machine.
$ gh repo clone amplience/dc-demostore-core
$ cd dc-demostore-core
$ npm install / npm i$ npm run dev$ npm run build
$ npm run startBoth dev and prod commands will also start a localhost. Then go to http://localhost:3000
Firing up Storybook is super simple:
$ npm run storybookThen go to http://localhost:6006. More details may be found in our Storybook README
The main tool for using your own Amplience environment with dc-demostore-core is dc-demostore-cli. The CLI tool allows you to quickly import a pre-configured set of Content Schemas, Content Types, Images, etc. to your Amplience acount. Basically, everything you'd see running dc-demostore-core OOTB against our 'core public' Amplience Environment.
At a high level the basic steps are:
- Request an Amplience Media and Dynamic Account (if you don't already have one)
- Deploy a fork of
dc-demostore-core(we'll cover deploying on Vercel) - Configure & use
dc-demostore-clito populate content - Update your local / deployed
dc-demostore-corewith environment variables to your account.
Note: If you already have an Amplience Demostore account and are upgrading to version
1.4.0or later, you should upload the rendering templates for Stylitics components into your Content Hub.
Location: examples/crs
Upload asset store in Content Hub: Templates
This application is setup to run with a predefined Amplience account structure to have all of the capabilities and organisational requirements to showcase capabilities effectively.
This section assumes you are already an Amplience partner, customer, or internal Amplience team member with access to the Amplience Support Center. IF the answer to any one of these is yes, go here for instructions on requesting a Demo Store Environment
If you already have a Dynamic Content and Dynamic Media instance, you can skip to the next step.
Go HERE for some basic instructions on Forking and deploying core.
Please refer directly to the this README on how to Install/Configure/Use the CLI tool
Once you have installed the demostore CLI tool, you can provision your account in two easy steps:
- Register your instance using the CLI command
env add
% demostore env add
✔ env name: · mydcinstance
✔ app deployment url: · https://mydomain.com
✔ cms client id: · zzzzzzzz-yyyy-yyyy-yyyy-xxxxxxxxxxxx
✔ cms client secret: · ****************************************************************
✔ cms hub id: · xxxxxxxxxxxxxxx
✔ dam username: · [email protected]
✔ dam password: · ********
info: [ amprsatest ] configure dc-cli...
info: [ amprsatest ] environment active
info: run [ env,add ]: started at Mon Mar 28 2022 12:39:21 GMT+0200 (Central European Summer Time)- You can provision your instance using the CLI command
import(more information on the CLI tool project page):
% demostore import --latest
info: run [ import ]: started at XXX XXX XX XXXX XX:XX:XX GMT+0200 (Central European Summer Time)
...
info: .env.local file format
info:
----------------------- COPY START ----------------------
NEXT_PUBLIC_DEMOSTORE_CONFIG_JSON='{"url":"XXX","algolia":{"appId":"XXX","apiKey":"XXX"},"cms":{"hub":"XXX","stagingApi":"XXX","imageHub":"XXX"}}'
------------------------ COPY END -----------------------
info:
info: Vercel format
info:
----------------------- COPY START ----------------------
{"url":"XXX","algolia":{"appId":"XXX","apiKey":"XXX"},"cms":{"hub":"XXX","stagingApi":"XXX","imageHub":"XXX"}}
------------------------ COPY END -----------------------
...
info: run completed in [ 1m47s ]Once ran, you will be provided with your own specific value for the NEXT_PUBLIC_DEMOSTORE_CONFIG_JSON environment variable to replace in both your .env.local file and in your Vercel deployment environment variable.
Note: If you ever need to revert, simply run the
cleanupcommand.
In the Fork and Deploy section you will have already created your local environment variable and the same on your vercel deployment.
We just need to change NEXT_PUBLIC_DEMOSTORE_CONFIG_JSON to the outputs from the dc-demostore-cli import for both local and in Vercel (Settings --> Environment Variables)
The outputs for both are in friendly copy and paste formats, see below for more details.
In your .env.local at the root of the project replace the current line of NEXT_PUBLIC_DEMOSTORE_CONFIG_JSON with your item from the automation. (.env.local file format)
Note: Reloading your page in development mode should be enough to take the new values into account.
In your Vercel project browse to Settings --> Environment Variables and edit the existing NEXT_PUBLIC_DEMOSTORE_CONFIG_JSON variable and replace the value with that from the dc-demostore-cli import. (Vercel format)
Note: You will have to redeploy your application to see the change.