├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── TROUBLESHOOTING.md ├── astro.config.mjs ├── package.json ├── pnpm-lock.yaml ├── public └── aws-logo.svg ├── src ├── components │ ├── App.css │ ├── App.tsx │ ├── BaseHead.astro │ ├── Footer.astro │ ├── Header.astro │ └── HeaderLink.astro ├── consts.ts ├── env.d.ts ├── pages │ └── index.astro └── styles │ └── global.css └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | # generated types 4 | .astro/ 5 | 6 | # dependencies 7 | node_modules/ 8 | 9 | # logs 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | 16 | # environment variables 17 | .env 18 | .env.production 19 | 20 | # macOS-specific files 21 | .DS_Store 22 | 23 | #amplify-do-not-edit-begin 24 | amplify/\#current-cloud-backend 25 | amplify/.config/local-* 26 | amplify/logs 27 | amplify/mock-data 28 | amplify/mock-api-resources 29 | amplify/backend/amplify-meta.json 30 | amplify/backend/.temp 31 | build/ 32 | dist/ 33 | node_modules/ 34 | aws-exports.js 35 | awsconfiguration.json 36 | amplifyconfiguration.json 37 | amplifyconfiguration.dart 38 | amplify-build-config.json 39 | amplify-gradle-config.json 40 | amplifytools.xcconfig 41 | .secret-* 42 | **.sample 43 | #amplify-do-not-edit-end 44 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | ## Code of Conduct 2 | This project has adopted the [Amazon Open Source Code of Conduct](https://aws.github.io/code-of-conduct). 3 | For more information see the [Code of Conduct FAQ](https://aws.github.io/code-of-conduct-faq) or contact 4 | opensource-codeofconduct@amazon.com with any additional questions or comments. 5 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing Guidelines 2 | 3 | Thank you for your interest in contributing to our project. Whether it's a bug report, new feature, correction, or additional 4 | documentation, we greatly value feedback and contributions from our community. 5 | 6 | Please read through this document before submitting any issues or pull requests to ensure we have all the necessary 7 | information to effectively respond to your bug report or contribution. 8 | 9 | 10 | ## Reporting Bugs/Feature Requests 11 | 12 | We welcome you to use the GitHub issue tracker to report bugs or suggest features. 13 | 14 | When filing an issue, please check existing open, or recently closed, issues to make sure somebody else hasn't already 15 | reported the issue. Please try to include as much information as you can. Details like these are incredibly useful: 16 | 17 | * A reproducible test case or series of steps 18 | * The version of our code being used 19 | * Any modifications you've made relevant to the bug 20 | * Anything unusual about your environment or deployment 21 | 22 | 23 | ## Contributing via Pull Requests 24 | Contributions via pull requests are much appreciated. Before sending us a pull request, please ensure that: 25 | 26 | 1. You are working against the latest source on the *main* branch. 27 | 2. You check existing open, and recently merged, pull requests to make sure someone else hasn't addressed the problem already. 28 | 3. You open an issue to discuss any significant work - we would hate for your time to be wasted. 29 | 30 | To send us a pull request, please: 31 | 32 | 1. Fork the repository. 33 | 2. Modify the source; please focus on the specific change you are contributing. If you also reformat all the code, it will be hard for us to focus on your change. 34 | 3. Ensure local tests pass. 35 | 4. Commit to your fork using clear commit messages. 36 | 5. Send us a pull request, answering any default questions in the pull request interface. 37 | 6. Pay attention to any automated CI failures reported in the pull request, and stay involved in the conversation. 38 | 39 | GitHub provides additional document on [forking a repository](https://help.github.com/articles/fork-a-repo/) and 40 | [creating a pull request](https://help.github.com/articles/creating-a-pull-request/). 41 | 42 | 43 | ## Finding contributions to work on 44 | Looking at the existing issues is a great way to find something to contribute on. As our projects, by default, use the default GitHub issue labels (enhancement/bug/duplicate/help wanted/invalid/question/wontfix), looking at any 'help wanted' issues is a great place to start. 45 | 46 | 47 | ## Code of Conduct 48 | This project has adopted the [Amazon Open Source Code of Conduct](https://aws.github.io/code-of-conduct). 49 | For more information see the [Code of Conduct FAQ](https://aws.github.io/code-of-conduct-faq) or contact 50 | opensource-codeofconduct@amazon.com with any additional questions or comments. 51 | 52 | 53 | ## Security issue notifications 54 | If you discover a potential security issue in this project we ask that you notify AWS/Amazon Security via our [vulnerability reporting page](http://aws.amazon.com/security/vulnerability-reporting/). Please do **not** create a public github issue. 55 | 56 | 57 | ## Licensing 58 | 59 | See the [LICENSE](LICENSE) file for our project's licensing. We will ask you to confirm the licensing of your contribution. 60 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT No Attribution 2 | 3 | Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so. 10 | 11 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 12 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 13 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 14 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 15 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 16 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 17 | 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Astro on AWS 2 | 3 | This project is a robust and user-friendly Astro website template equipped with seamless AWS Amplify authentication integration. It offers developers an efficient starting point for creating secure and performant web applications. With a focus on speed and scalability, this template harnesses the power of Astro's static site generation and AWS Amplify's authentication services to streamline the development process. Leveraging Amplify's easy authentication and hosting, an Astro website can be deployed within minutes. 4 | 5 | ## △ Deploy to Amplify 6 | 7 | [![amplifybutton](https://oneclick.amplifyapp.com/button.svg)](https://console.aws.amazon.com/amplify/home#/deploy?repo=https://github.com/aws-samples/amplify-authentication-for-astro) 8 | 9 | ## 📁 Project Structure 10 | 11 | Inside of your Astro project, you'll see the following folders and files: 12 | 13 | ``` 14 | ├── public/ 15 | ├── src/ 16 | │   ├── components/ 17 | │   │   ├── App.css 18 | │   │   ├── App.tsx 19 | │   │   ├── BaseHead.astro 20 | │   │   ├── Footer.astro 21 | │   │   ├── Header.astro 22 | │   │   ├── HeaderLink.astro 23 | │   ├── pages/ 24 | │   │   ├── index.astro 25 | │   └── styles/ 26 | │      ├── global.css 27 | │   ├── consts.ts 28 | │   ├── env.d.ts 29 | ├── .gitignore 30 | ├── astro.config.mjs 31 | ├── CODE_OF_CONDUCT.md 32 | ├── CONTRIBUTING.md 33 | ├── LICENSE 34 | ├── package.json 35 | ├── pnpm-lock.yaml 36 | ├── README.md 37 | ├── TROUBLESHOOTING.md 38 | └── tsconfig.json 39 | ``` 40 | 41 | ## 💻 Commands 42 | 43 | All commands are run from the root of the project, from a terminal: 44 | 45 | | Command | Action | 46 | | :------------------------ | :----------------------------------------------- | 47 | | `pnpm install` | Installs dependencies | 48 | | `npm run dev` | Starts local dev server at `localhost:4321` | 49 | | `npm run build` | Build your production site to `./dist/` | 50 | | `npm run preview` | Preview your build locally, before deploying | 51 | | `npm run astro ...` | Run CLI commands like `astro add`, `astro check` | 52 | | `npm run astro -- --help` | Get help using the Astro CLI | 53 | 54 | ## ✅ Prerequisites: 55 | 56 | - [ ] An active [AWS Account](https://aws.amazon.com/getting-started/) 57 | - [ ] [Amplify CLI](https://docs.amplify.aws/cli/) installed and configured 58 | - [ ] [PNPM installed](https://pnpm.io/installation) 59 | - [ ] [Node installed](https://nodejs.org/en) (will need NPM which is included) 60 | - [ ] Basic knowledge in: 61 | 62 | - [React](https://react.dev/) 63 | - [Typescript](https://www.typescriptlang.org/) 64 | - [AWS](https://aws.amazon.com/) 65 | - [AWS Amplify](https://aws.amazon.com/amplify/) 66 | - [Amazon Cognito](https://aws.amazon.com/cognito/) 67 | - [Astro](https://astro.build/) 68 | 69 | > [!NOTE] 70 | > Run `npm doctor` and check if everything is `ok` 71 | 72 | ## 🚀 Getting Started 73 | 74 | 1. Clone the repository onto your local machine 75 | 76 | via HTTPS 77 | 78 | ``` 79 | git clone https://github.com/aws-samples/amplify-authentication-for-astro.git 80 | ``` 81 | 82 | or via SSH 83 | 84 | ``` 85 | git clone git@github.com:aws-samples/amplify-authentication-for-astro.git 86 | ``` 87 | 88 | or via Github CLI 89 | 90 | ``` 91 | gh repo clone aws-samples/amplify-authentication-for-astro 92 | ``` 93 | 94 | - Edit the `src/consts.ts` file to update the title and the website description 95 | - Make any edits you see fit! 96 | - Deploy your new application using the steps below 97 | 98 | ## 🐚 Steps: 99 | 100 | 1. Create an [Amplify project](https://docs.amplify.aws/lib/project-setup/prereq/q/platform/js/) 101 | - Run `amplify configure` if necessary 102 | 2. Run `amplify init` 103 | - This [initializes your Amplify application](https://docs.amplify.aws/cli/start/workflows/#initialize-new-project) 104 | - Keep everything default other than this step: 105 | - Change the `Distribution Directory Path` from `build` to `dist` 106 | 3. Run `amplify add auth` 107 | - This adds [Authentication to your Amplify app](https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/#set-up-and-configure-amplify-auth) 108 | - You can keep everything default and then username 109 | 4. Run `amplify add hosting` 110 | - This adds [Hosting to your Amplify App](https://docs.amplify.aws/start/getting-started/hosting/q/integration/react/) 111 | - Select hosting with Amplify console 112 | - Select Manual deployment (or if you have a repository to connect you can connect via git integration) 113 | 5. Run `amplify publish` 114 | - This will [build the front-end](https://docs.amplify.aws/start/getting-started/hosting/q/integration/js/#publish-your-app) with the purpose of a static web-page and will give you a url by default ending with `.amplifyapp.com` 115 | 6. You will need to copy this url and update the Astro configuration file 116 | 1. Copy the url 117 | 2. Navigate to the root of the code 118 | 3. Open the file `astro.config.mjs` 119 | 4. Update the `site: "UPDATE_ME.COM"` to the url copied earlier 120 | 7. Run `amplify publish` once more if you are in manual deployment mode. If you are not, then you can commit and make a new push. 121 | 8. If you now navigate to the URL, you will see the website live! 122 | 123 | ## 🔧 Troubleshooting 124 | 125 | Check out the [TROUBLESHOOTING](TROUBLESHOOTING) file for more information. 126 | 127 | ## 🧹 Cleanup 128 | 129 | 1. Run `amplify delete` 130 | - This will remove all cloud environments and resources and wipe out locally created files by the Amplify CLI 131 | 2. Navigate to the AWS console and to the IAM service 132 | - Remove the IAM user `amplify-dev` created earlier 133 | 134 | ## 💫 Astro 135 | 136 | > Check out [the Astro documentation](https://docs.astro.build)! 137 | 138 | This was modeled after the [Astro blog starter template](https://github.com/withastro/astro/tree/main/examples/blog), which is based off of [Bear Blog](https://github.com/HermanMartinus/bearblog/). 139 | 140 | ## 🔒 Security 141 | 142 | See [CONTRIBUTING](CONTRIBUTING.md#security-issue-notifications) for more information. 143 | 144 | ## 📜 License 145 | 146 | This library is licensed under the MIT-0 License. See the [LICENSE](LICENSE) file. 147 | 148 | ## ✍️ Authors 149 | 150 | - [Aditya Addepalli](https://github.com/adiadd) -- Cloud Developer @ AWS Professional Services 151 | -------------------------------------------------------------------------------- /TROUBLESHOOTING.md: -------------------------------------------------------------------------------- 1 | # Troubleshooting 2 | 3 | If you see this error 4 | 5 | ``` 6 | ✖ Zipping artifacts failed. This is often due to an invalid distribution directory path. Run "amplify configure project" to check if your Distribution Directory is pointing to a valid path. 7 | 🛑 Please ensure your build artifacts path exists. 8 | ``` 9 | 10 | Then run `amplify configure project` and ensure that your `Distribution Directory Path:` is set to dist 11 | -------------------------------------------------------------------------------- /astro.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "astro/config"; 2 | import mdx from "@astrojs/mdx"; 3 | import sitemap from "@astrojs/sitemap"; 4 | import react from "@astrojs/react"; 5 | 6 | // https://astro.build/config 7 | export default defineConfig({ 8 | site: "https://dev.d2l7gw9pgh8hks.amplifyapp.com", //TODO: Change this to redirect properly 9 | integrations: [mdx(), sitemap(), react()], 10 | vite: { 11 | ssr: { 12 | external: ["@aws-amplify/pubsub"], 13 | noExternal: ["@aws-amplify/*", "@radix-ui/*"], 14 | }, 15 | resolve: { 16 | alias: [ 17 | { 18 | find: "./runtimeConfig", 19 | replacement: "./runtimeConfig.browser", 20 | }, 21 | ], 22 | }, 23 | }, 24 | }); 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "astro-on-aws", 3 | "type": "module", 4 | "version": "0.0.1", 5 | "scripts": { 6 | "dev": "astro dev", 7 | "start": "astro dev", 8 | "build": "astro build", 9 | "preview": "astro preview", 10 | "astro": "astro" 11 | }, 12 | "dependencies": { 13 | "@astrojs/mdx": "^1.0.2", 14 | "@astrojs/react": "^3.0.2", 15 | "@astrojs/rss": "^3.0.0", 16 | "@astrojs/sitemap": "^3.0.0", 17 | "@aws-amplify/ui-react": "^5.3.0", 18 | "@types/react": "^18.0.21", 19 | "@types/react-dom": "^18.0.6", 20 | "astro": "^3.0.10", 21 | "aws-amplify": "^5.3.10", 22 | "react": "^18.0.0", 23 | "react-dom": "^18.0.0" 24 | } 25 | } -------------------------------------------------------------------------------- /public/aws-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 79 | 80 | -------------------------------------------------------------------------------- /src/components/App.css: -------------------------------------------------------------------------------- 1 | button { 2 | display: inline-block; 3 | border-radius: 4px; 4 | background-color: #000000; 5 | border: none; 6 | color: #FFFFFF; 7 | text-align: center; 8 | font-size: 17px; 9 | width: 130px; 10 | transition: all 0.5s; 11 | cursor: pointer; 12 | margin: 12px; 13 | } 14 | 15 | button span { 16 | cursor: pointer; 17 | display: inline-block; 18 | position: relative; 19 | transition: 0.5s; 20 | } 21 | 22 | button span:after { 23 | content: '»'; 24 | position: absolute; 25 | opacity: 0; 26 | top: 0; 27 | right: -15px; 28 | transition: 0.5s; 29 | } 30 | 31 | button:hover span { 32 | padding-right: 15px; 33 | } 34 | 35 | button:hover span:after { 36 | opacity: 1; 37 | right: 0; 38 | } -------------------------------------------------------------------------------- /src/components/App.tsx: -------------------------------------------------------------------------------- 1 | import { Amplify } from 'aws-amplify'; 2 | import type { WithAuthenticatorProps } from '@aws-amplify/ui-react'; 3 | import { withAuthenticator } from '@aws-amplify/ui-react'; 4 | import '@aws-amplify/ui-react/styles.css'; 5 | import "./App.css"; 6 | 7 | import awsconfig from '../aws-exports'; 8 | Amplify.configure(awsconfig); 9 | 10 | export function App({ signOut, user }: WithAuthenticatorProps) { 11 | return ( 12 | <> 13 |

Hello {user?.username}!

14 | {/* 15 | */} 16 | 17 | 20 | 21 | ); 22 | } 23 | 24 | export default withAuthenticator(App); -------------------------------------------------------------------------------- /src/components/BaseHead.astro: -------------------------------------------------------------------------------- 1 | --- 2 | // Import the global.css file here so that it is included on 3 | // all pages through the use of the component. 4 | import '../styles/global.css'; 5 | 6 | interface Props { 7 | title: string; 8 | description: string; 9 | image?: string; 10 | } 11 | 12 | const canonicalURL = new URL(Astro.url.pathname, Astro.site); 13 | 14 | const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props; 15 | --- 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | {title} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /src/components/Footer.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const today = new Date(); 3 | --- 4 | 5 | 11 | 32 | -------------------------------------------------------------------------------- /src/components/Header.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HeaderLink from './HeaderLink.astro'; 3 | import App from '../components/App'; 4 | import { SITE_TITLE } from '../consts'; 5 | --- 6 | 7 |
8 | 14 |
15 | 56 | -------------------------------------------------------------------------------- /src/components/HeaderLink.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import type { HTMLAttributes } from 'astro/types'; 3 | 4 | type Props = HTMLAttributes<'a'>; 5 | 6 | const { href, class: className, ...props } = Astro.props; 7 | 8 | const { pathname } = Astro.url; 9 | const isActive = href === pathname || href === pathname.replace(/\/$/, ''); 10 | --- 11 | 12 | 13 | 14 | 15 | 25 | -------------------------------------------------------------------------------- /src/consts.ts: -------------------------------------------------------------------------------- 1 | // Place any global data in this file. 2 | // You can import this data from anywhere in your site by using the `import` keyword. 3 | 4 | export const SITE_TITLE = "Astro on AWS"; 5 | export const SITE_DESCRIPTION = "Welcome to a simple starter for Astro on AWS!"; 6 | -------------------------------------------------------------------------------- /src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /src/pages/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import BaseHead from '../components/BaseHead.astro'; 3 | import Header from '../components/Header.astro'; 4 | import Footer from '../components/Footer.astro'; 5 | import { SITE_TITLE, SITE_DESCRIPTION } from '../consts'; 6 | --- 7 | 8 | 9 | 10 | 11 | 12 | 13 | 20 | 21 |
22 |
23 |

Welcome to Our Astro Website!

24 |
25 |

26 | This is a starter template for deploying Astro websites with AWS Amplify authentication right out of the box. Customize it to build your own website! 27 |

28 |
29 | 30 |
31 |

Get Started

32 |

33 | Ready to launch your website? Follow the README guide to deploy your Astro site on AWS with authentication. 34 |

35 |

Here are some key resources that this template uses:

36 | 43 |
44 |
45 |

Get started by editing this page in src/pages/index.astro

46 |
47 |
48 |