Secondstep-marketing NPM

Second Step Public Site

Welcome to the new public face of Second Step. It is built with:

Please read up on those parts and pieces as needed to answer questions or learn more about the tooling for this project.

NPM installation

You will need to create an .npmrc in your home folder, and in that file you will need to place an npm auth key. You can get a personally generated key by going to Azure DevOps -> Artifacts -> connect to feed -> npm -> generate npmrc credentials

Hosting

The site is hosted in Azure Cloud Services under the app service secondstep-marketing. Under that service, you can find the deployment for production, test, dev and storybook, the latter three living under the deployment slots tab. Access keys and other environment specific configurations live in the application settings tab. The site is built and run in a docker container, and you can find the registry for all the docker container in the cfchildren container registry under the grouping also name secondstep-marketing. In there we have containers for all the environments.

Environments:

Testing and Integration

We have a build pipeline setup for dev, test, and production environments. All branches currently build off the branch publicSiteReact, but in the future that will switch back to the old dev branch. An automated build runs with testing upon open a new pull request and upon merging in code to the mainline branch. The deployment to the dev and storybook environments happens automatically, but for test and prod, those builds must be triggered manually.

The project is setup to force tests to run before pushing code up to a remote branch, to ensure all code is working.

Run Unit Tests

npm shrinkwrap && npm install #run npm install if not previously run
npm run test

To view HTML coverage results, launch:

reports/coverage/index.html

Start The SecondStep Node App

To run SecondStep on localhost:8888, perform the following steps.

npm shrinkwrap && npm install #run npm install if not previously run
npm run build
npm run start
(To run in development mode, npm run dev)

This will kick off localhost:8888. You will need to open a new shell prompt to continue running the tests. Once you're done running tests, you can return to this prompt and shut down localhost by hitting Ctrl/Cmd - C.

Local .ENV file

When developing locally you will need to create a local copy of the .env file to mimick variables in dev, test and prod environments. Below are the keys you would need. Values containing sensitive information have to be sourced individually via the AZURE environments, links are below.

The dev env here
The testenv is here

** Please note these envs are subject to change

ENV = DEV
NODE_ENV = development
CONTENT_URL = http://localhost:8888
MAIL_API_KEY = #Available in Azure app settings
SPACE = 98bcvzcrxclo
PREVIEW_ACCESS_TOKEN = #Available in Azure app settings
PREVIEW_HOST = preview.contentful.com
DELIVERY_ACCESS_TOKEN = #Available in Azure app settings
DELIVERY_HOST = cdn.contentful.com
DEFAULT_HOST = preview
PUBLIC_SITE_DOMAIN = http://localhost:8888
STORE_DOMAIN = https://store.secondstep.local
APP_DOMAIN = https://app-dev.secondstep.org
DNN_DOMAIN = http://localhost:8888
IDP_DOMAIN = https://login-dev.secondstep.org

Coding standards

This project uses an thorough set of eslint rules for coding standards, and the prettier library to enforce writing style. Beyond that, this project doesn't use any prebuilt styling libraries. Beyond that, our personal standards for this project are as follows:

Relative units over fixed (REM over PX)
Style extension over duplication
Minimal html and css

This list will certainly grow over time as we move toward a unification of our standards.

IE 11 Testing

For anyone on the team using a Mac, a special setup will be required to test the rendering in IE 11. You will need:

Install VirtualBox, and download the image from the Microsoft site linked above. Also, unzip the file you downloaded. It will create a folder with a .vmdk file and a .ovf. Once you open up VirtualBox, in the top bar, Go to File > Import Appliance, and select the .ovf file you unzipped earlier. Once you do so, VirtualBox will start importing the Win7 machine, and once its done you can simply double click it and it will open up a new instance of Windows that has IE 11.

Lastly, you can access the sites running on your machine via the IP address 10.0.2.2, but you can also setup localhost to map to 10.0.2.2 for connivence. To do so, open C:\windows\system32\drivers\etc\hosts and add 10.0.2.2 localhost to the end of the file. Restart the machine, and when you start back up, you can access localhost on your box via 10.0.2.2 or via localhost in the virtual machine. For example, to hit storybook, you would do http://10.0.2.2:9001/ or http://localhost:9001/.

Config Updates

To add a new configuration variable you will need to update two files. The first is the app/config.js. In that file update the config object with the new key set to read from the process.env. Key's should use standard environment envariable naming processes:

const config = {
  someNewKey: process.env.SOME_NEW_KEY
}

someNewKey - is the new key for the config object.
process.env.SOME_NEW_KEY is the value as it appears in the enviroment. Its a good idea to have the enviroment key and the config key be the same to avoid confusion

The second is the .env file. If you do not have a .env file located at the root of project you can create one. This is a plain text file that follows the format of key = value on each line.

SOME_NEW_LEY = New Key value

Storyline files

Moving the storyline files over from the DNN cdn is easy Grab the files from where ever they live, save them to your desktop

For AWS, log into AWS, navigate to the s3 resource, find the cdn2.secondstep.org bucket, go to the prod/storyline folder, and hit the upload button. Then just drag and drop the files, hit next until you are uploading the files.

For Azure, download the Azure Storage Explorer, open it, add your credentials, and then hit Storage Accounts -> cfccdn -> Blob Containers -> prod. In there, you will see a storyline folder. Open it, and then click upload, and upload the folder.

You can then hit them on their respective hosting addresses.

Azure: https://cfccdn.azureedge.net/prod/storyline/{STORYLINE-FOLDER}/story_html5.html

AWS: https://cdn2.secondstep.org/prod/storyline/{STORYLINE-FOLDER}/story_html5.html