tlcodegen v2.2.0
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
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" ,