Setting up a local environment

Prerequisites:

• Your ENgrid template code. You can find this on your Github repository.
  • If you’re starting a fresh project, use this template repo to get started.
• Node.js (latest LTS) https://nodejs.org/en/download/
• An IDE or text editor, such as VSCode, with support for Prettier for code formatting.
  • If you’re using VSCode you can support Prettier with this extension
• A method of locally serving your ENgrid assets from https://your-repo-name.test
  • There are many ways to do this but one of the simplest is to use a tool such as Laravel Valet or Herd.

One you have that set up, and you have your ENgrid project code, you can get started:

• Install your dependencies

npm install

• Activate automatic compiling of your assets on save

npm install

• Build your assets for production

npm run build

Upgrading the core ENgrid Scripts Package

Your ENgrid theme gets the vast majority of its functionality from the engrid-scripts package, which is used by your theme code.

That code is hosted on Github here and in 2 NPM packages here and here.

To bring in new features, you can run this command to upgrade the engrid-script package to the latest version and rebuild your assets:

npm run update

If you need to use a specific engrid-script versions you can run:

npm uninstall @4site/engrid-styles @4site/engrid-common
npm install @4site/engrid-styles@your-version-number
npm install @4site/engrid-common@your-version-number

You can always view your current ENgrid version in the banner at the start of your compiled JS and CSS assets.

Account Buildout

Client Theme Dependent on 4Site's Page Template Framework (ENgrid)

EN Pages

Folder Names

• Ω1. 4Site Live - Reference Pages for Duplication
• Ω1. 4Site Live Legacy - Live pages on Legacy Code
• Ω2. 4Site Staging - Quality Assurance Testing
• Ω3. 4Site Development - Code Development
• ΩΩ. Archive
• ΩΩ. Archive - XYZ

Page Names

• ENGRID - Theming Brand Guide
• ENGRID - Left Left 1 Column
• ENGRID - Center Left 1 Column
• ENGRID - Center Center 1 Column
• ENGRID - Center Center 2 Column
• ENGRID - Center Right 1 Column
• ENGRID - Right Right 1 Column
• REFERENCE - Data Capture Page
• ... (continue with other page names)

EN Uploaded Assets

Folders Names

• Ω1. 4Site Live Templates
• Ω2. 4Site Live Legacy Templates
• ΩΩ. Archive
• ΩΩ. Archive - XYZ

File Names

• Ω 4Site Live Templates > engrid.min.css
• Ω 4Site Live Templates > engrid.min.js
• Ω 4Site Live Templates > loader.js
• Ω 4Site Live Templates > logo.png

EN Component Library

Folder Names

• Ω1. 4Site Live - ENgrid Page Template and Components
• Ω1. 4Site Live Legacy - ENgrid Page Template and Components
• Ω2. 4Site Staging - ENgrid Page Template and Components
• Ω3. 4Site Development - ENgrid Page Template and Components
• ΩΩ. Archive
• ΩΩ. Archive - XYZ

Component Names

• 4Site Page Template - Center Left 1 Column
• General: Copy: Placeholder Title (Lorem Ipsum)
• General: Copy: Placeholder Paragraph (Lorem Ipsum)
• General: Form: Personal Information (First Name, Last Name, Email)
• Donation: Button (Give $AMOUNT $FREQUENCY)