Getting Started for Developers
The Astro UXDS Web Component and CSS libraries provide a starting point to build in-browser space app experiences and custom applications following today’s web development best practices. The Astro UXDS Web Components are designed to be as platform and implementation-agnostic as possible, easy to implement or extend in existing projects, and generic by default. Each component, as well as the overall CSS library, is individually published and updated according to the standard Semantic Versioning pattern.
In an effort to provide as close to native a development experience as possible, we’ve provided a set of litElement-powered Web Components distributed in individual packages on npm.org. You can also see the full source code here and instructions for importing the components in a typical NodeJS project here.
Astro CSS, Icons and Fonts
We recognize that not all space application development projects are tooled for utilizing Web Components, so we also provide a CSS-only library containing name-spaced classes in addition to the icons and font files which are typically included within the components. You can download today’s version of these assets.
Astro Storybook and Sample Apps
You can review the latest versions of the web components at the Astro Storybook. The Astro development team uses Storybook as an environment for building and demonstrating the capabilities of each component. If your team often works offline, you may want to download and run the Storybook on your local network to see how the examples work.
For online examples of full Astro app experiences, check out these EGS Service-Specific sample experiences:
|Ground Resources Management||Telemetry, Tracking, and Control|
|Dashboard - Source code||Monitor - Source code|
|Equipment Manager - Source code||Command - Source code|
|Schedule - Source code||Investigate - Source code|
These examples use a previous release of Astro, and are not intended as boilerplates for building new applications. See below for easy ways to get started building Astro web applications.
You can import Astro UXDS Web Components to an existing application using npm and litElement. Detailed instructions for using Astro components are available in the project’s README.
If you’re considering a non-Web Component Astro implementation, directions for this process will be available soon.
Astro for Material Design
We also have Material Design themes using Astro styling. These files include everything needed to build an Astro Application using both Astro Components and/or Material Design Components.
There are two ways to add Astro for Material Design CSS to your project:
- Via CDN - Simply add the one line of code to your HTML and get the newest version of Astro for Material Design.
- Dark Theme (Default)
<link rel="stylesheet" href="https://gitcdn.link/repo/RocketCommunicationsInc/astro-material-themes/main/dark/dist/darkTheme.css" />
- Light Theme
<link rel="stylesheet" href="https://min.gitcdn.link/repo/RocketCommunicationsInc/astro-material-themes/main/light/dist/lightTheme.css" />
- Dark Theme (Default)
- Download CSS Files Directly - Each can be found in our downloads section.
The Astro team has worked with EGS to establish the EGS Compliance requirements for developers targeting the EGS Platform. These requirements are specific to EGS development; these requirements are based off of common best practices and accessibility guidance and it is highly recommended for all users to incorporate them into their applications.
Offline Development Resources
This website and its contents are provided as separate downloadable files for the convenience of developers and designers working in closed environments. Designer and Developer assets are provided as downloads on their respective ‘Getting Started’ sections:
If you’ve found a possible bug in Astro components or CSS, open a support ticket to let us know.
Each page on astrouxds.com has a support button at the bottom of the page for technical support.