tlcodegen

Introduction

Welcome to The Lumery's Code Generator! This tool will generate starting files for you to build upon and compile to be able to put into vendor platforms.

Getting Started

To setup your environment for code generation you must:

1. Install Node

http://nodejs.org

Jump onto the website and download installation package

Note: If you have previously installed Node (and NPM). This project uses a couple modern packages, so it requires a late version of Node, you might need to upgrade.

2. Install dependant packages

Open Visual Studio Code, open the Terminal window.

Open View menu, select Terminal option.

Install TypeScript

In terminal type: npm install -g typescript

Install SASS

In terminal type: npm install -g sass

Install Yarn

In terminal type: npm install -g yarn

Install UglifyJS

In terminal type: npm install -g uglify-js

Install UglifyCSS

In terminal type: npm install -g uglifycss

Install HTTP Server

In terminal type: npm install -g http-server

3. Initialize project

Within the terminal window, in the project root folder (i.e. the folder that contains the package.json file).

In terminal type: yarn install

Using the project

Initialise project

This function creates the folder and files that are relevant for the project.

To initialise a project: yarn run init-project

This function creates the following:

• .gitignore file
• Updates the config file with the chosen platform
• Foundations directory and base branding SASS files
• Copies platform specific templates to foundations directory

Generating campaign

This function creates the folder and files for an individual campaign.

To generate a campaign: yarn run generate-campaign

This will ask you for the:

• Campaign code (i.e the JIRA task code - LOR123)
• Number of experiences - including the "A" experience.

Adding Experience

This function adds a new experience into the selected campaign.

To add a new experience: yarn run add-experience

This will ask you for the:

• Campaign code (i.e. the JIRA task code - LOR123)

The function counts the number of experience folders, and then adds a new experience using the next alpha char. It requires the experience sequence to remain unbroken. As such, if you have previously deleted an experience it will error. For example, if you previously had four experiences (A,B,C,D) and then deleted 'C' - this function will try and add a 'D' experience again.

Duplicating Campaign

This function duplicates an existing campaign into a new campaign.

To duplicate a campaign: yarn run duplicate-campaign

This will ask you for the:

• Existing Campaign code (i.e. the JIRA task code - LOR123)
• New campaign code (i.e. the JIRA task code - LOR123)

This function copies the SASS and Typescript files and all directories into a new campaign. It runs a search and replace over the code, replacing the old code with the new.

Duplicating Experience

This function duplicates an existing experience into the current campaign.

To duplicate an experience: yarn run duplicate-experience

This will ask you for the:

• Curent campaign code (i.e. the JIRA task code - LOR123)

This function copies the SASS and Typescript files into new experience. It runs a search and replace over the code, replacing the old code with the new.

Building\Running campaign

This function will compile & watch the Typescript and SASS files. It will also run BrowserSync and host those files (in localhost:3000).

To generate a campaign: yarn run dev

This will ask you for the:

• Campaign code (i.e the JIRA task code - LOR123)
• Experience - The specific experience you are working on.

This will only compile the specific experience you are working on.

Setting up Requestly

Install the "Requestly" Chrome browser extension.

Create a "Requestly" rule:

• Click "New Rule" button
• Select "Insert Scripts" rule
• Give rule a name i.e. "NewsCorp - inject BrowserSync"
• Add "request" rule - "Path" "Contains" "subscribe/news/1/"
• Add "Custom Script", "JavaScript", "Before Page Load", "http://localhost:3000/script.js"
• Add "Custom Script", "CSS", "http://localhost:3000/style.css"

Typescript Install

Ensure you are in the typescript branch and install using the following: npm install

Install Registry Files

If you are recieveing the following issues when installing,

npm ERR! code E401 npm ERR! Unable to authenticate, your authentication token seems to be invalid. npm ERR! To correct this please trying logging in again with: npm ERR! npm login

Remove .npvm file

Daves Version

colors

Install Colors: npm install colors

Installing Jest

Install Jest

npm install jest

Install TS Jest and Globals

npm install ts-jest npm install @jest/globals

Delete Jest within Package.json

delete jest within package.json

Code to Remove: "jest": { "testEnvironment": "node" },

Initialise Config Files for TS-Jest

npx ts-jest config:init

Add to Jest.config.js

Inside jest.config.js add the following:

/** @type {import('ts-jest').JestConfigWithTsJest} */ module.exports = { preset: 'ts-jest', testEnvironment: 'node', };

Inside tsconfig

Add jest to types

Example: "types": [ "node", "typescript", "inquirer", "jest" ],