Skip to content

Commit

Permalink
docs: import and update documentation from PWA Guide (#125)
Browse files Browse the repository at this point in the history
  • Loading branch information
dhhyi committed Apr 22, 2020
1 parent 5a67ece commit 4934b66
Show file tree
Hide file tree
Showing 61 changed files with 4,113 additions and 663 deletions.
30 changes: 30 additions & 0 deletions .github/workflows/test.yml
Expand Up @@ -116,6 +116,36 @@ jobs:
name: dist
path: dist

Docs:
runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v1
- name: Use Node.js 12
uses: actions/setup-node@v1
with:
node-version: 12

- name: Install root dependencies
uses: bahmutov/npm-install@v1

- name: Check KB Labels
run: node docs/check-kb-labels

- name: Check Documentation Overview
run: node docs/check-documentation-overview

- name: Check Newline After Every Sentence
run: node docs/check-sentence-newline

- name: Check Formatting
run: |
npx prettier --write docs/**/*.*
bash ./scripts/ci-test-no-changes.sh 'you probably committed unformatted documentation'
- name: Check Dead Links
run: node docs/check-dead-links

Universal:
needs: [Build]
runs-on: ubuntu-latest
Expand Down
6 changes: 5 additions & 1 deletion .prettierignore
Expand Up @@ -15,6 +15,9 @@
*.hbs
*.mp4
*.js.map
*.properties
*.crt
*.key
.*ignore
.gitattributes
.editorconfig
Expand All @@ -27,7 +30,8 @@ browserslist
/builds
/cache
/dist
/docs
/docs/**/*.ditamap
/docs/theme
/out-tsc
/coverage
/junit.xml
Expand Down
5 changes: 4 additions & 1 deletion .vscode/extensions.json
Expand Up @@ -21,7 +21,10 @@
"hex-ci.stylelint-plus",
"ms-vscode.vscode-typescript-tslint-plugin",
// testing
"andys8.jest-snippets"
"andys8.jest-snippets",
// documentation
"streetsidesoftware.code-spell-checker",
"yzhang.markdown-all-in-one"
],
// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
"unwantedRecommendations": ["eg2.tslint"]
Expand Down
90 changes: 2 additions & 88 deletions README.md
Expand Up @@ -12,97 +12,11 @@ More information on the PWA can be found [here](https://www.intershop.com/en/pro

In order to contribute, please have a look at our [Contribution Guidelines](./CONTRIBUTING.md)

## Getting Started

---

Before working with this project, download and install [Node.js](https://nodejs.org) with the included npm package manager. Currently Node.js 12.x LTS with the corresponding npm is required.

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) and follows the Angular CLI style guide and naming coventions.

---

After having cloned the project from the Git repository, open a command line in the project folder and run `npm install`.

The project uses Angular CLI which has to be installed globally. Run `npm install -g @angular/cli` once to globally install Angular CLI on your development machine. Use `ng serve --open` to start up the development server and open the progressive web app in your browser.

The project can alternatively be run in production mode with `npm start`.

## Customization

Before customizing the PWA for your specific needs, have a look at our [Customization Guide](./docs/customizations.md) and also have a look at the current [PWA Guide](https://support.intershop.de/kb/index.php?c=Search&qoff=0&qtext=guide+progressive+web+app) first.

## Development Server

Run `ng serve` or `ng s` for a development server that is configured by default via `environment.ts` to use mocked responses instead of actual REST calls.

Running `ng serve --configuration production` or `ng s -c production` starts a server that will communicate by default with the Intershop Commerce Management of our public demo via REST API (see the used `environment.prod.ts` for the configuration).

The project is also configured to support the usage of an own local environment file `environment.local.ts` that can be configured according to the development environment, e.g. with a different icmBaseURL or different configuration options (see the `environment.model.ts`). This file will be ignored by Git so the developer-specific setting will not be commited. To use this local environment configuration, the server should be started with `ng s -c local`.

Once the server is running, navigate to `http://localhost:4200/` in your browser to see the application. The app will automatically reload if you change any of the source files.

Running `ng serve --port 4300` will start the server on a different port than the default 4200 port, e.g., if one wants to run multiple instances in paralell for comparison.

Running `ng serve --open` will automatically open a new browser tab with the started application. The different start options can be combined.

> DO NOT USE webpack-dev-server IN PRODUCTION!
## Deployment

Deployments are generated to the `dist` folder of the project.

Use `npm run build` to generate the preferred angular universal enabled version. On the server the `dist/server.js` script has to be executed with `node`.

Alternatively, you can use `ng build --prod` to get an application using browser rendering. All the files under `dist/browser` have to be served statically. The server has to be configured for fallback routing,
see [Server Configuration in Angular Docs](https://angular.io/guide/deployment#server-configuration).

For a production setup we recommend building the docker image supplied with the `Dockerfile` in the root folder of the project. Build it with `docker build -t my_pwa .`. To run the PWA with multiple channels and [Google PageSpeed](https://developers.google.com/speed/pagespeed/insights/) optimizations, you can use the nginx docker image supplied in the sub folder [nginx](./nginx).

We provide templates for [Kubernetes Deployments](./schematics/src/kubernetes-deployment) and [DevOps](./schematics/src/azure-pipeline) for Microsoft Azure.

## Progressive Web App (PWA)

To run the project as a Progressive Web App with an enabled [Service Worker](https://angular.io/guide/service-worker-getting-started), use `npm run start` to build and serve the application. After that open `http://localhost:4200` in your browser and test it or run a PWA Audit. Currently only `localhost` or `127.0.0.1` will work with the service worker since it requires `https` communication on any other domain.

## Running Unit Tests

Run `npm test` to start an on the fly test running environment to execute the unit tests via [Jest](https://facebook.github.io/jest/) once. To run Jest in watch mode with interactive interface, run `npm run test:watch`.

## Running End-to-End Tests

Run `npm run e2e` to execute the end-to-end tests via [cypress](https://www.cypress.io/).
You have to start your development or production server first as cypress will instruct you.

## Code Style

Use `npm run lint` to run a static code analysis.

For development make sure the used IDE or Editor follows the [EditorConfig](http://editorconfig.org/) configuration of the project and uses [Prettier](https://prettier.io/) to help maintain consistent coding styles (see `.editorconfig` and `.prettierrc.json`).

Use `npm run format` to perform a formatting run on the code base with Prettier.

## Pre-Commit Check

`npm run check` is a combination task of `lint`, `format` and `test` that runs some of the checks that will also be performed in Continuous Integration on the whole code base. Do not overuse it as the run might take a long time.

Prefer using `npx lint-staged` to perform a manual quick evaluation of staged files. This also happens automatically when committing files. It is also possible to bypass verification on commit, following the suggestions of the versioning control tool of your choice.

## Documentation

Project documentation can be found in the [Documentation Folder](./docs).

The project is also configured to use [Compodoc](https://compodoc.github.io/website) as API documentation tool. The output folder for the documentation is set to `\docs\compodoc`. To generate the code documentation, run `npm run docs`. To generate and serve the documentation at http://localhost:8080, run `npm run docs:serve`. To serve the documentation while watching for source changes, run `npm run docs:watch`.

## Code Scaffolding

With the integrated `intershop-schematics` this project provides the functionality to generate different code artifacts according to our style guide and project structure. `ng generate` will use our custom schematics by default, e.g. run `ng generate component component-name` in the shared folder to generate a new shared component. `ng generate --help` gives an overview of available Intershop-specific schematics.

The Angular CLI default schematics are still available and working. However, they need to be prefixed to use them, e.g. `ng generate @schematics/angular:guard`. A list of the available Angular CLI schematics can be fetched with `ng generate @schematics/angular: --help`.

## Further Help
## Getting Started

To get more help on the Angular CLI, use `ng help` or check out the [Angular CLI Documentation](https://github.com/angular/angular-cli/wiki).
Head over to our documentation section for a [Quick Start Guide](./docs/guides/getting-started.md).

## License

Expand Down
62 changes: 56 additions & 6 deletions docs/README.md
@@ -1,11 +1,61 @@
# Documentation
<!--
kb_concepts
kb_pwa
kb_everyone
kb_sync_latest_only
-->

## [Project Structure](./project-structure.md)
# Documentation Overview

## [State Management](./state-management.md)
## Developers

## [Customizations](./customizations.md)
- [Getting Started](./guides/getting-started.md)

## [Migrations](./migrations.md)
### Architecture

## [Search Engine Optimization](./search-engine-optimization.md)
- [Concept - Software Architecture](./concepts/software-architecture.md)
- [Concept - Project Structure](./concepts/project-structure.md)
- [Concept - State Management](./concepts/state-management.md)
- [Guide - State Management](./guides/state-management.md)
- [Concept - CMS Integration](./concepts/cms-integration.md)
- [Concept - Configuration](./concepts/configuration.md)
- [Guide - Propagating Environment Variables](./guides/propagating-environment-variables.md)
- [Concept - Localization](./concepts/localization.md)
- [Concept - SEO](./concepts/search-engine-optimization.md)
- [Guide - Forms](./guides/forms.md)

### Developing

- [Guide - Development Environment](./guides/development.md)
- [Concept - Styling](./concepts/styling-behavior.md)
- [Concept - Testing](./concepts/testing.md)
- [Guide - Testing with Jest](./guides/testing-jest.md)
- [Guide - Testing with Cypress](./guides/testing-cypress.md)
- [Guide - Code Documentation](./guides/code-documentation.md)
- [Guide - Angular Component Development](./guides/angular-component-development.md)
- [Guide - Angular Change Detection](./guides/angular-change-detection.md)
- [Guide - Data Handling with Mappers](./guides/data-handling-with-mappers.md)

### Customization

- [Guide - Customizations](./guides/customizations.md)
- [Guide - Multiple Themes](./guides/multiple-themes.md)
- [Guide - Migration](./guides/migrations.md)
- [Concept - URL Rewriting](./concepts/url-rewriting.md)
- [Guide - Mocking REST API Calls](./guides/mocking-rest-calls.md)

## Operations

### Setup

- [Concept - Deployment Scenarios](./concepts/deployment-scenarios.md)
- [Guide - SSR Parameters](./guides/ssr-startup.md)
- [Concept - Hybrid Approach](./concepts/hybrid-approach.md)
- [Guide - Hybrid Approach and ICM URL Rewriting](./guides/hybrid-approach-icm-url-rewriting.md)
- [Guide - CI](./guides/continuous-integration.md)
- [Guide - Google Tag Manager](./guides/google-tag-manager.md)

### Monitoring

- [Concept - Logging](./concepts/logging.md)
- [Guide - Client-Side Error Monitoring with Sentry](./guides/sentry-error-monitoring.md)
109 changes: 109 additions & 0 deletions docs/check-dead-links.js
@@ -0,0 +1,109 @@
const fs = require('fs');
const path = require('path');
const async = require('async');
const { promisify } = require('util');
const glob = promisify(require('glob'));

async function checkExternalLinkError(link) {
console.log('check', link);
const client = link.startsWith('https') ? require('https') : require('http');
return new Promise(resolve => {
const req = client.request(link, res => {
isError = res.statusCode >= 400;
if (isError) {
console.warn('found dead link to', link);
}
resolve(isError);
});

req.on('error', () => {
console.warn('found dead link to', link);
resolve(true);
});
req.end();
});
}

function sleep(milliseconds) {
return new Promise(resolve => setTimeout(resolve, milliseconds));
}

function getLineInfoOfString(data, str) {
var perLine = data.split('\n');
for (let line = 0; line < perLine.length; line++) {
const index = perLine[line].indexOf(str);
if (index > 0) {
return ':' + (line + 1) + ':' + (index + 1);
}
}
return '';
}

glob('**/*.md')
.then(files => {
const externalLinks = [];
let isError = false;

files
.filter(file => !file.includes('node_modules'))
.forEach(file => {
const content = fs.readFileSync(file, { encoding: 'utf-8' });
const match = content.match(/\[.*?\](\(|:\s+)[^\s]*\)?/g);
if (match) {
match.forEach(link => {
const linkTo = /\](\(<?|:\s+)(.*?)(>?\)|$|#)/.exec(link)[2];

if (linkTo) {
// link is not document-internal
if (linkTo.startsWith('http')) {
externalLinks.push(linkTo);
} else {
const normalized = path.normalize(path.join(path.dirname(file), linkTo));
if (!fs.existsSync(normalized)) {
console.warn(file + getLineInfoOfString(content, linkTo) + ': found dead link to "' + linkTo + '"');
isError = true;
}
}
}
});
}
});
if (isError) {
throw new Error('found dead internal links');
}
return externalLinks;
})
.then(externalLinks => {
if (process.argv.length > 2 && process.argv[2] === 'fast') {
console.warn('skipping external link check');
return;
}

const filtered = externalLinks
.map(link => link.replace(/\/$/, ''))
.filter((val, idx, arr) => arr.indexOf(val) === idx)
.filter(
link =>
!link.includes('github.com') &&
!link.includes('repository.intershop.de') &&
!link.includes('support.intershop.com') &&
!link.includes('github.com/intershop/intershop-pwa/commit')
)
.sort();

async.eachSeries(
filtered,
async link => {
const isError = await checkExternalLinkError(link);
if (isError) throw new Error('found dead external link to', link);
await sleep(1000);
},
err => {
if (err) throw err;
}
);
})
.catch(err => {
console.error(err.message);
process.exit(1);
});
39 changes: 39 additions & 0 deletions docs/check-documentation-overview.js
@@ -0,0 +1,39 @@
const fs = require('fs');
const path = require('path');
const glob = require('glob');

const overviewContent = fs.readFileSync('docs/README.md', { encoding: 'utf-8' });
const match = overviewContent.match(/\[.*?\](\(|:\s+)[^\s]*\)?/g);
const links = [];

if (match) {
match.forEach(link => {
const linkTo = /\](\(<?|:\s+)(.*?)(>?\)|$|#)/.exec(link)[2];

if (linkTo) {
// link is not document-internal
if (!linkTo.startsWith('http')) {
const basename = path.normalize(path.join(process.cwd(), 'docs', linkTo));
links.push(basename);
}
}
});
}

const files = glob.sync('docs/*/*.md');
let isError = false;

files.forEach(file => {
const fullPath = path.join(process.cwd(), file);
// console.log('######');
// console.log(files);
// console.log(fullPath);
if (!links.includes(fullPath)) {
console.warn('document not linked in overview docs/README.md: .' + file.substr(4));
isError = true;
}
});

if (isError) {
process.exit(1);
}

0 comments on commit 4934b66

Please sign in to comment.