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 your 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.
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
$ yarn install$ yarn dev$ yarn build
$ yarn startBoth dev and prod commands will also start a localhost. Then go to http://localhost:3000
Firing up Storybook is super simple:
$ yarn 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 - Point
dc-demostore-coreto your Dynamic Content Hub and run
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 Mon Mar 28 2022 12:45:26 GMT+0200 (Central European Summer Time)
...
...
...
info: run completed in [ 3m20s ]Note: If you ever need to revert, simply run the
cleanupcommand.
- Create a .env.local file on the root of your project:
Default setting:
NEXT_PUBLIC_DEMOSTORE_CONFIG_LOCATOR=amprsaprod:defaultYour setting with your Hub Name {hubname}
NEXT_PUBLIC_DEMOSTORE_CONFIG_LOCATOR={hubname}:defaultIf you are using services like Vercel, you can configure the environment variable in the settings, and re-deploy your application.