Docusaurus website for Analog.js - the full-stack meta-framework for Angular using Vite
Tags: angular, vite, docusaurus, opensource
Published: 2022-08-21 19:28:06

---
title: Docusaurus website for Analog.js - the full-stack meta-framework for Angular using Vite
published: true
description: I contributed a Docusaurus website with documentation and end-to-end tests for Analog.js, the upcoming meta-framework for Angular using Vite.
tags: angular,vite,docusaurus,opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f7mww6jj2xr5ee55q6yp.png
# Use a ratio of 100:42 for best results.
---

[Brandon Roberts](https://twitter.com/brandontroberts) is creating the first full-stack meta-framework for Angular and it is open sourced under the MIT license.

Recently, I contributed:
- A website with documentation using Docusaurus, GitHub Pages, and GitHub Actions
- Cypress end-to-end test suites demonstrating and verifying how to use Cypress with Vite as the development server for an Angular application

## The analogjs.org website

The official website for Analog.js is [analogjs.org](https://analogjs.org). I set it up using [Docusaurus](https://docusaurus.io/) on a free [GitHub Pages](https://docs.github.com/en/pages) host with the brand-new GitHub Pages experience using GitHub Actions\[[blog post](https://github.blog/2022-08-10-github-pages-now-uses-actions-by-default/)\]\[[documentation](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow)\], GitHub Environments, and GitHub Deployments.

> {% embed https://youtu.be/ImSK0nv7KfY %}
> I created this video demonstrating how to set up a Docusaurus website from scratch using GitHub Pages and GitHub Actions.

### The home page

The hero banner on the home page links to the documentation and an Analog.js sandbox on StackBlitz.

Next, the home page lists the current and upcoming features of Analog.js:
- Vite-powered
- Hybrid SSR/SSG-support
- File-based routing
- API (server) routes

While the Angular CLI has been using Webpack for a number of years, more modern and especially faster alternatives have emerged in the web ecosystem. One of them is [Vite](https://vitejs.dev/). Analog.js publishes an Angular plugin for Vite demonstrating:
- A Vite development server
- Bundling an application using Vite
- Unit testing using Vitest
- End-to-end-testing using a Vite development server

### Documentation
Navigating to the documentation, the initial version of the website has these pages:
- Introduction
- Installation
- Contributors
- Contributing
- Sponsoring

### Packages
Currently, two npm packages are released and documented:
- [`@analogjs/vite-plugin-angular`](https://www.npmjs.com/package/@analogjs/vite-plugin-angular)
- [`create-analog`](https://www.npmjs.com/package/create-analog)

The first package is a Vite plugin to support Angular applications and the initializer scaffolds an Analog project.

## End-to-end testing using Cypress and Vite
[Cypress](https://www.cypress.io/) is a popular end-to-end testing framework. When using the Angular CLI, Webpack is used as the development server for Angular applications. [The Analog.js repository](https://github.com/analogjs/analog) covers [the Angular Getting Started tutorial application](https://angular.io/start) with end-to-end tests using Cypress with the Vite development server.

## More to come
Analog.js is just getting started. There are plenty of areas to contribute in. Contribute to [Analog.js' GitHub issues](https://github.com/analogjs/analog/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) or [support the core team on GitHub Sponsors](https://analogjs.org/docs/sponsoring) to help make it happen.