Skip to main content

Install with Create Gesso Script

Before proceeding with the installation, it is crucial to review and fulfill the prerequisites outlined in the previous section. This will ensure a smooth and successful installation process of Gesso. Take the time to carefully go through the prerequisites and ensure that all requirements are met before proceeding with the installation steps.

Creating the project​

We recommend creating a new project using @acromedia/create-gesso, which sets up everything automatically for you. Upon completion, you will receive a working site similar to our demo sites:

Each demo site includes pre-built pages for:

  • Homepage
  • Catalog
  • Product
  • Cart
  • Checkout

To create a project, run:

pnpm create @acromedia/gesso
info

If this command fails it's either you're missing a global .npmrc or a local .npmrc (in your current dir). If the problem still exists check your access token.

During the script execution you will be prompted to enter some information specific to your project. Most of the information exists in 1password, your Figma id can be found in the URI of your project's Figma page. If you're unsure of your Figma ID ask your UX lead. Your Figma token should be your Figma access token.

On installation, you'll see the following prompts:

? Enter project name: my-project
? Do you want to create a design system project? Yes
? Enter Figma token: [hidden]
? Enter Figma id: 123abc321cba
? Do you want to create a frontend project? Yes
? Which CMS do you want? Drupal
? Would you like to setup a Drupal backend: No
? Would you like to enter existing CMS url:
? Which Commerce platform do you want? BigCommerce
? Enter BigCommerce X-Auth-Token: [hidden]
? Enter BigCommerce Store Hash: 123abc321cba
? Enter BigCommerce Storefront URL: https://my-site.mybigcommerce.com
? Enter BigCommerce Frontend URL: http://localhost:3000

The installation will provide you with the following (depending on selections):

  • Design system
  • Nextjs Frontend
  • A CMS Integration (Drupal or Storyblok)
  • A Commerce Integration (BigCommerce, Shopify, Drupal-Commerce)
  • An ERP integration (Acumatica)

Once complete 1-3 new directories will be created under the directory from which you ran the script.

By default when selecting frontend and design-system setup the script will create a monorepo structure with the following directories (Unless you specify --skipMonoRepo)

With monorepo​

my-project           my-project-backend


my-project (monorepo) will contain the following directories:
- apps/frontend
- packages/design-system

my-project-backend (if selected) will contain your CMS backend.

Without monorepo​

my-project-frontend       my-project-design-system        my-project-backend

From here if all the information entered is correct you should have a working frontend with the selected integrations running.

cd my-project-frontend && pnpm dev

Our frontend's leverage the NextJS framework if you are not familiar with NextJS I would start by brushing up on their docs.

Our Design System is based off Material UI, their docs are a good supplement to understanding what components you have access to outside of what's listed in storybook.

Setup lagoon environments​

Once created each project will contain the necessary lagoon Dockerfiles for hosting.

Located under .lagoon/Dockerfile which contains required args listed as

ARG NAME_OF_ARG

As of writing this there is only one required arg to be created in lagoon which is the GITLAB_API_TOKEN.

In order for the frontend / design system to successfully deploy you must ensure you have created build scoped environment variable containing:

See getting-started/deployments#deploying-on-lagoon on how you can create environment variables.

Congratulations​

☆ 彡(ノ^ ^)ノ Congratulations your ready to get rocking! ヘ(^ ^ヘ)☆ 彡

Next Steps​

  • Take a look at Integrations for more details on how integrations work and how you configure / use them.