Remix Americana Stack

Learn more about Remix Stacks.

To get started, run:

npx create-remix@latest --template nasa-gcn/americana-stack

What's in the stack

• Accessibility-first design system and CSS framework for United States government web sites with the U.S. Web Design System (USWDS)
• USWDS widgets for React with trussworks/react-uswds
• AWS deployment with Architect
• Production-ready DynamoDB Database
• DynamoDB access via arc.tables
• Code formatting with Prettier
• Linting with ESLint
• Static Types with TypeScript
• Automated formatting, linting, and type checks on git commits with husky and lint-staged

Development

The following command will run two processes during development when using Architect as your server.

• Your Architect server sandbox
• The Remix development server

$ npm run dev

Your file changes are watched, and assets are rebuilt upon change.

Open up http://localhost:3333 and you should be ready to go!

Deploying

Before you can deploy, you'll need to do some setup with AWS:

• First install the AWS CLI
• Then follow the Architect setup instructions.

If you make it through all of that, you're ready to deploy!

1. build the app for production:

   npm run build

2. Deploy with arc

   arc deploy production

You're in business!

Styling

There are a variety of ways to add custom CSS styling.

Theme customization - app/theme.scss

You can customize the USWDS theme by adjusting any of the USWDS settings or by adding custom Sass by editing the file app/theme.scss.

Regular style sheets - app/**/*.css

You can add ordinary CSS stylesheets (file extension .css) anywhere in the app directory and then link them into the route modules where you need them.

CSS modules - app/**/*.module.css

You can add (file extension .module.css) anywhere in the app directory and then include them in any React component.