The source code for the Astro UXDS website.
Project Structure | Commands |
---|
First, clone this project to your local environment.
git clone git@github.com: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
/
├── public/
├── src/
│ ├── components/
│ ├── data/
│ ├── layouts/
│ ├── pages/
│ └── utils/
├── .editorconfig
├── .gitignore
├── astro.config.js
├── package.json
├── README.md
└── tsconfig.json
public
DirectoryThe public
directory contains all of the files and assets that do not need to be processed. These files are served untouched.
src
DirectoryThe src
directory contains all of the source files that will be processed. This includes all of the pages, components, styles, data, and content.
.editorconfig
FileThe .editorconfig
file is used by GitHub and different editors to maintain consistent coding styles throughout the project.
Learn More about .editorconfig
.gitignore
FileThe .gitignore
file is used by Git to prevent specific files from being committed to the project.
package.json
FileThe package.json
file is used by different package managers to handle the installation of external packages used by this project.
astro.config.js
FileThe astro.config.js
file is used by Astro to configure how the website is project is built.
Learn More about astro.config.js
components
directoryThe components
directory contains any reusable snippets of code used throughout the site.
data
directoryThe data
directory contains JSON files that represent content used in special sections or landing pages.
layouts
directoryThe layouts
directory contains snippets of layout code used by one or across several pages.
pages
directoryThe pages
directory contains Astro and Markdown files used to generate pages on the site.
utils
directory...
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"
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 |