{"id":15093152,"url":"https://github.com/angular/microsites","last_synced_at":"2025-10-06T11:31:32.162Z","repository":{"id":65977161,"uuid":"61576400","full_name":"angular/microsites","owner":"angular","description":"Master repository for sites on the angular.io subdomains (universal.angular.io, material.angular.io, etc)","archived":true,"fork":false,"pushed_at":"2018-07-27T21:59:18.000Z","size":1900,"stargazers_count":29,"open_issues_count":2,"forks_count":17,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-09-26T11:04:20.500Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/angular.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-20T20:00:32.000Z","updated_at":"2024-03-20T16:35:30.000Z","dependencies_parsed_at":"2023-02-19T18:45:16.274Z","dependency_job_id":null,"html_url":"https://github.com/angular/microsites","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular%2Fmicrosites","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular%2Fmicrosites/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular%2Fmicrosites/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular%2Fmicrosites/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/angular","download_url":"https://codeload.github.com/angular/microsites/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219877267,"owners_count":16554853,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-25T11:03:53.152Z","updated_at":"2025-10-06T11:31:26.730Z","avatar_url":"https://github.com/angular.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Microsites\nA monorepo containing all Angular 2 microsites.\n\n## Dependencies\n* [Harp.js](http://harpjs.com/), a static web server with a built-in preprocessor.\n* [Material Design Lite](https://getmdl.io/)\n* [microsite-ui](https://github.com/ericjim/microsite-ui), a shared repo containing that contains all components shared among the microsites.\n\n## Architecture\nAngular.io has five microsites: Mobile, CLI, Universal, Protractor, and Material; all which exist under a *.angular.io subdomain. Each site consists of a hero with an image, some features with descriptions, a footer with helpful links, and a call-to-action. Depending on the status of the library/tool that the site advertises, the call-to-action will vary. For example, some sites will lead to the code base on GitHub (Material, Mobile, CLI), while the others take the viewer to their respective documentation (Universal, Protractor). Besides the slight variation, the intended theme for all microsites is to retain a similar look and behaviour. To accomplish this, we built `microsite-ui` as a shared resource among all the sites.\n\n## Partials\nThe `microsite-ui` dependency contains [partials](https://harpjs.com/docs/development/partial) which are the building blocks of all of our microsites. Similarly, each microsite has its own set of partials which best suit what it is trying to convey. Generally speaking, any partial that can be reused should be in `microsite-ui`, and any partial that is specific to a microsite should be within its own folder outside of `microsite-ui`. Before javascript frameworks were a thing, the use of partials was used to render sites from the server-side. Since we are not presenting a site with much interactivity, the use of server-side rendering was preferred due to its improvements in SEO, and their overall ease of use.\n\n## Installing dependencies\nWe have one external dependency, `harp.js`. It’s our server, our compiler, and our linter. Let’s install it.\n```\n\u003e npm install -g harp  \n```\n\n## Quickstart\nRun the following command:\n```\n\u003e npm run clean-start\n```\n\nIf you'd like to know more about the build, read the section \"How to serve locally\". Otherwise skip to Building and Hosting.\n\n## How to serve locally\nTo begin develop our sites, we must first clone the `angular/microsites` repository locally.\n```\n\u003e git clone git@github.com:angular/microsites.git  \n```\n\nOnce cloned, choose a site to work on. Let’s pick Universal as an example\n```\n\u003e cd universal.angular.io\n```\n\nWe now need to get all the dependencies for Universal, namely `material-design-lite` and `microsite-ui`, so we will use npm to fetch them.\n```\n\u003e npm install\n```\n\nIf you inspect `package.json` you’ll notice that `microsite-ui` is not an NPM package.\n```\n…\n  \"dependencies\": {\n    \"material-design-lite\": \"^1.1.3\",\n    \"microsite-ui\": \"git://github.com/ericjim/microsite-ui.git\"\n  },\n…\n```\nAs a result, we’ll have to go to `node_modules/microsite-ui` and manually install all of its dependencies. NOTE: this is a pitfall we would like to fix. Possibly by assimilating `microsite-ui` into `angular/microsites`\n\n```\n\u003e cd ./node_modules/microsite-ui\n\u003e npm install\n```\n\nNow that all of our packages have their sub dependencies, we can run a development server using `harp.js`. At the root of the chosen microsite (in this example, Universal). Run the following command:\n```\n\u003e harp server\n```\n\nUnless you’ve changed the configuration port of `harp.js`, we can visit `localhost:9000` to preview the site.\n\n## Building and Hosting\nAll of our microsites are hosted on Firebase. You should install their command-line tool to follow along:\n```\n\u003e npm install -g firebase-tools\n```\n\nSince a `firebase.json` file already exists, we can see the name of a microsites bucket in Firebase; this is a unique name. As an example, here is how Universal’s file looks.\n```  \n{\n  \"firebase\": \"universal-angular-io\",\n  \"public\": \"www\",\n  \"ignore\": [\n    \"firebase.json\",\n    \"**/.*\"\n  ]\n}  \n```\n\n### Building\n\nRequirements:\n\n- You need Node 4 to compile, Node 6 doesn't seem to work properly with Harp 0.23.0.\n- Harp 0.20.1 is verified to work, but the latest Harp seems to not like some node_modules directories and even though it compiles, the resulting `www/` won't work.\n\n**WARNING: Always works from a clean repo, then npm install the microsite and go to node_modules/microsites-ui and npm install that.**\n\nInstalling any other local packages (including harp) will create some problems in harp which scan all the directories to find templates.\n\nYou’ll notice that the official release app key on Firebase is `universal-angular-io`. Assuming you have access to the instance, you’ll be able to deploy everything under the `www` folder. To create this folder run `harp compile` from the root of the specific microsite folder.\n\n\u003e_There should be no errors_. Sometimes, you'll see the following error though:\n\u003e\n\u003e```json\n{\n  \"source\": \"EJS\",\n  \"dest\": \"HTML\",\n  \"filename\": \"/Users/hansl/Sources/microsites/cli.angular.io/node_modules/microsite-ui/guides/_partials/guide.ejs\",\n  \"lineno\": 1,\n  \"name\": \"TypeError\",\n  \"message\": \"/Users/hansl/Sources/microsites/cli.angular.io/node_modules/microsite-ui/guides/cli-setup.ejs:1\\n \u003e\u003e 1| \u003c%- partial('_partials/guide', {\\n    2|     title: 'Page Title',\\n    3|     selectedGuide: '../docs/1-cli-setup'\\n    4| }) %\u003e\\n\\nCannot read property 'docs' of undefined\",\n}\n```\n\u003e\n\u003e The way to fix this is to open the `node_modules/microsites-ui/guides/_partials/guide.ejs` and replace line 3:\n\u003e\n\u003e ```javascript\n\u003e var docs = public.guides.docs._contents\n\u003e ```\n\u003e with the following:\n\u003e\n\u003e ```javascript\nvar docs = []\n```\n\u003e\n\u003e I do not understand Harp and how it finds templates, but there seems to be no `guides` at all, while the folder is there and there are templates in it. It also seems that those guides are not used and were something being developed and left in an unfinished state. Removing these does not change the result.\n\n`Harp.js` will prevent you from compiling a full site if any linting errors arise. At which point the platform will indicate where the issues are located. Once the site is compiled under `www`, you may deploy to Firebase using the following command:\n\n```\n\u003e firebase deploy\n```\n\nAnd you may preview the site using:\n\n```\n\u003e firebase open\n```\n\n*Hint: If you’d like to deploy a test instance of the microsite you are  working on, consider creating a new instance on Firebase and replacing the “firebase” key in `firebase.json`. Just be careful not to commit it.*\n\n## Todos:\n* [X] Add mobile\n* [X] Add cli\n* [X] Add universal\n* [X] Add protractor\n* [X] Add material\n* [ ] How do we handle the shared code from [microsite-ui](https://github.com/ericjim/microsite-ui)? \n* [ ] Streamline build process\n* [x] Document build process","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular%2Fmicrosites","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangular%2Fmicrosites","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular%2Fmicrosites/lists"}