Docusaurus website for Analog.js - the full-stack meta-framework for Angular using Vite

layzee

Lars Gyrup Brink Nielsen

Posted on August 21, 2022

Docusaurus website for Analog.js - the full-stack meta-framework for Angular using Vite

Brandon Roberts 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. I set it up using Docusaurus on a free GitHub Pages host with the brand-new GitHub Pages experience using GitHub Actions[blog post][documentation], GitHub Environments, and GitHub Deployments.


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. 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:

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 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 covers the Angular Getting Started tutorial application 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 or support the core team on GitHub Sponsors to help make it happen.

💖 💪 🙅 🚩
layzee
Lars Gyrup Brink Nielsen

Posted on August 21, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related