Astro WWW

The source code for the Astro UXDS website.

Project Structure	Commands

You will need NodeJS and Git to contribute to the website.

Getting Started

First, clone this project to your local environment.

git clone [email protected]:RocketCommunicationsInc/astro-www.git

Next, install the project dependencies. These are required to develop the website locally.

npm install

Finally, start the server.

npm start

That’s it!

Navigate to http://localhost:3000/. You should see the website, which is now running in your local environment.

The npm start command launches the website in development mode. Any saved changes are reflected instantly in the local website.

Learn about all of the commands

Project Structure

/
├── public/
├── src/
│   ├── components/
│   ├── data/
│   ├── layouts/
│   ├── pages/
│   └── utils/
├── .editorconfig
├── .gitignore
├── astro.config.js
├── package.json
├── README.md
└── tsconfig.json

The public Directory

The public directory contains all of the files and assets that do not need to be processed. These files are served untouched.

The src Directory

The src directory contains all of the source files that will be processed. This includes all of the pages, components, styles, data, and content.

The .editorconfig File

The .editorconfig file is used by GitHub and different editors to maintain consistent coding styles throughout the project.

Learn More about .editorconfig

The .gitignore File

The .gitignore file is used by Git to prevent specific files from being committed to the project.

The package.json File

The package.json file is used by different package managers to handle the installation of external packages used by this project.

The astro.config.js File

The astro.config.js file is used by Astro to configure how the website is project is built.

Learn More about astro.config.js

The components directory

The components directory contains any reusable snippets of code used throughout the site.

The data directory

The data directory contains JSON files that represent content used in special sections or landing pages.

The layouts directory

The layouts directory contains snippets of layout code used by one or across several pages.

The pages directory

The pages directory contains Astro and Markdown files used to generate pages on the site.

The utils directory

...

Fetching Figma Assets

Static assets such as component do and dont examples are maintained by the design team and live in a Figma file. These images can automatically be pulled from the file using the npm run fetch:images command.

To pull assets locally, create a .env file with the following keys:

FIGMA_ASSET_ACCESS_TOKEN: your personal figma access token
FIGMA_ASSET_FILE_ID: the website images figma file id
FIGMA_ASSET_OUTPUT_DIR: "public/img"

Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run start	Starts local dev server at localhost:3000
npm run build	Build the production site to ./dist/
npm run serve	Serves the production build at localhost:3000
npm run check	Checks all .astro files in the project
npm run check:css	Checks all .css files in the project
npm run check:js	Checks all .js and .ts files in the project