Added routing for extensionless static files (#14)

- updated READMEs - added amplify.yml back to monorepo
alexnguyennz · Dec 20, 2023 · acd29cc · acd29cc
1 parent 7f73b12
commit acd29cc
Show file tree

Hide file tree

Showing 18 changed files with 108 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -112,7 +112,7 @@ frontend:
 
 ### Static or prerendered pages
 
-All pages must be server-rendered by default - you can't use `export const prerender = true` on any pages. As a workaround for static pages however, you can set a manual Amplify rewrite for every static route.
+To use static pre-rendered pages (e.g. with `export const prerender = true` for `server`, or by default for `hybrid`), you will need to create an Amplify rewrite for every static route.
 
 For example, if you have a static `/about` page, create a rewrite of:
 
@@ -130,16 +130,24 @@ For base path routes, create a rewrite of:
 
 `/base/about/ /base/about/index.html 200 (Rewrite)`
 
+### Static files without extensions
+Due to limitations with Amplify routing, if you want to serve static files without extensions (from the `public` folder), place them in a folder called `assets` (`/public/assets/`) and reference them in any pages or components with `/assets/filename`. 
+
+Any other static files with extensions can be placed anywhere in `public`.
+
+### 404 Pages
+Due to limitations with Amplify routing, custom 404 pages (e.g. `404.astro`) need to be SSRed (not prerendered) to work.
+
 ## Features
 
 ### Supported
 - server and hybrid mode
-- image optimization with `<Image>` and `<Picture />` (tentative)
+- image optimization with `<Image>` and `<Picture />`
 - base paths
 - middleware
 
 ### Unsupported / Untested
-- pre-rendered pages (without workaround above)
+- Amplify Image optimization
 - ???
 
 ## Monorepo Project Setup
@@ -170,7 +178,8 @@ AWS Amplify build specification:
 ```yaml
 version: 1
 applications:
-  - appRoot: demos/blog # change accordingly
+  # if you want to deploy another demo or change the configuration, you will need to change `amplify.yml` - changing the build spec won't override this file
+  - appRoot: demos/blog
     frontend:
       phases:
         preBuild:

diff --git a/amplify.yml b/amplify.yml
@@ -0,0 +1,20 @@
+version: 1
+applications:
+  - appRoot: demos/blog
+    frontend:
+      phases:
+        preBuild:
+          commands:
+            - npm i -g pnpm
+            - pnpm config set store-dir .pnpm-store
+            - pnpm i
+        build:
+          commands:
+            - pnpm run build
+      artifacts:
+        baseDirectory: .amplify-hosting
+        files:
+          - '**/*'
+      cache:
+        paths:
+          - .pnpm-store/**/*
diff --git a/demos/base-path/CHANGELOG.md b/demos/base-path/CHANGELOG.md
@@ -1,5 +1,12 @@
 # base-path
 
+## 0.0.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - [email protected]
+
 ## 0.0.5
 
 ### Patch Changes

diff --git a/demos/base-path/package.json b/demos/base-path/package.json
@@ -2,7 +2,7 @@
   "name": "base-path",
   "type": "module",
   "private": true,
-  "version": "0.0.5",
+  "version": "0.0.6",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",

diff --git a/demos/blog/CHANGELOG.md b/demos/blog/CHANGELOG.md
@@ -1,5 +1,12 @@
 # blog
 
+## 0.0.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - [email protected]
+
 ## 0.0.5
 
 ### Patch Changes

diff --git a/demos/blog/package.json b/demos/blog/package.json
@@ -2,7 +2,7 @@
   "name": "blog",
   "type": "module",
   "private": true,
-  "version": "0.0.5",
+  "version": "0.0.6",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",

diff --git a/demos/blog/public/assets/image b/demos/blog/public/assets/image
diff --git a/demos/blog/src/pages/404.astro b/demos/blog/src/pages/404.astro
@@ -0,0 +1,19 @@
+---
+import BaseHead from "../components/BaseHead.astro";
+import Header from "../components/Header.astro";
+import Footer from "../components/Footer.astro";
+import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+  </head>
+  <body>
+    <Header title={SITE_TITLE} />
+    <main><h1>404 - Page Not Found</h1></main>
+
+    <Footer />
+  </body>
+</html>
diff --git a/demos/blog/src/pages/index.astro b/demos/blog/src/pages/index.astro
@@ -12,8 +12,6 @@ const response = await fetch(
 const data = await response.json();
 
 const locals = Astro.locals;
-
-console.log("data", locals);
 ---
 
 <!doctype html>
@@ -37,6 +35,8 @@ console.log("data", locals);
         alt=""
       />
 
+      <img src="/assets/image" alt="static asset with no extension" />
+
       <p>
         Welcome to the official <a href="https://astro.build/">Astro</a> blog
         starter template. This template serves as a lightweight,

diff --git a/demos/hybrid/CHANGELOG.md b/demos/hybrid/CHANGELOG.md
@@ -1,5 +1,12 @@
 # hybrid
 
+## 0.0.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - [email protected]
+
 ## 0.0.5
 
 ### Patch Changes

diff --git a/demos/hybrid/package.json b/demos/hybrid/package.json
@@ -2,7 +2,7 @@
   "name": "hybrid",
   "type": "module",
   "private": true,
-  "version": "0.0.5",
+  "version": "0.0.6",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",

diff --git a/packages/adapter/CHANGELOG.md → packages/astro-aws-amplify/CHANGELOG.md b/packages/adapter/CHANGELOG.md → packages/astro-aws-amplify/CHANGELOG.md
@@ -1,5 +1,11 @@
 # astro-aws-amplify
 
+## 0.0.9
+
+### Patch Changes
+
+- Added routing for extensionless static files
+
 ## 0.0.8
 
 ### Patch Changes

diff --git a/packages/adapter/README.md → packages/astro-aws-amplify/README.md b/packages/adapter/README.md → packages/astro-aws-amplify/README.md
@@ -112,7 +112,7 @@ frontend:
 
 ### Static or prerendered pages
 
-All pages must be server-rendered by default - you can't use `export const prerender = true` on any pages. As a workaround for static pages however, you can set a manual Amplify rewrite for every static route.
+To use static pre-rendered pages (e.g. with `export const prerender = true` for `server`, or by default for `hybrid`), you will need to create an Amplify rewrite for every static route.
 
 For example, if you have a static `/about` page, create a rewrite of:
 
@@ -130,16 +130,24 @@ For base path routes, create a rewrite of:
 
 `/base/about/ /base/about/index.html 200 (Rewrite)`
 
+### Static files without extensions
+Due to limitations with Amplify routing, if you want to serve static files without extensions (from the `public` folder), place them in a folder called `assets` (`/public/assets/`) and reference them in any pages or components with `/assets/filename`.
+
+Any other static files with extensions can be placed anywhere in `public`.
+
+### 404 Pages
+Due to limitations with Amplify routing, custom 404 pages (e.g. `404.astro`) need to be SSRed (not prerendered) to work.
+
 ## Features
 
 ### Supported
 - server and hybrid mode
-- image optimization with `<Image>` and `<Picture />` (tentative)
+- image optimization with `<Image>` and `<Picture />`
 - base paths
 - middleware
 
 ### Unsupported / Untested
-- pre-rendered pages (without workaround above)
+- Amplify Image optimization
 - ???
 
 ## Monorepo Project Setup
@@ -170,7 +178,8 @@ AWS Amplify build specification:
 ```yaml
 version: 1
 applications:
-  - appRoot: demos/blog # change accordingly
+  # if you want to deploy another demo or change the configuration, you will need to change `amplify.yml` - changing the build spec won't override this file
+  - appRoot: demos/blog
     frontend:
       phases:
         preBuild:

diff --git a/packages/adapter/package.json → packages/astro-aws-amplify/package.json b/packages/adapter/package.json → packages/astro-aws-amplify/package.json
@@ -1,6 +1,6 @@
 {
   "name": "astro-aws-amplify",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "private": false,
   "description": "Deploy Astro to AWS Amplify (SSR)",
   "keywords": [

diff --git a/packages/adapter/src/index.ts → packages/astro-aws-amplify/src/index.ts b/packages/adapter/src/index.ts → packages/astro-aws-amplify/src/index.ts
@@ -50,6 +50,12 @@ export default function amplify(): AstroIntegration {
         const deployManifestConfig = {
           version: 1,
           routes: [
+            {
+              path: `${_config.base}assets/*`,
+              target: {
+                kind: "Static",
+              },
+            },
             {
               path: `${_config.base}*.*`,
               target: {

diff --git a/packages/adapter/src/server.ts → packages/astro-aws-amplify/src/server.ts b/packages/adapter/src/server.ts → packages/astro-aws-amplify/src/server.ts
diff --git a/packages/adapter/tsconfig.json → packages/astro-aws-amplify/tsconfig.json b/packages/adapter/tsconfig.json → packages/astro-aws-amplify/tsconfig.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml