mooxl / astroad

A pre-configured setup for easy website development with Astro and Payload CMS using Docker.

Astroad

Astroad is a pre-configured setup for Astro and Payloadcms, designed to make it easy for you to start building your website. With Astroad, you'll have a complete development environment that you can run locally using Docker. This setup simplifies the testing and development of your website before deploying it to a production environment.

Prerequisites

Before getting started with Astroad, make sure you have the necessary software installed:

• Docker
• Node.js
• Yarn

Configuration

While there's no configuration necessary for local development, deployment via Github Workflows requires specific secrets and variables to be set.

Secrets:

• USER: User on the server
• HOST: IP or URL of the server
• KEY: SSH KEY for connecting to the server
• MONGODB_PW: Password for MongoDB
• MONGODB_USER: User for MongoDB
• PATH: Path where the repository resides on the server
• PAYLOAD_PORT: Port at which Payload listens
• PAYLOAD_SECRET: String to encrypt Payload data
• TOKEN: Github Access Token for the webhook to trigger the payload.yml workflow and execute a new Astro build

Variables:

• ASTRO_HOST: Hostdomain of the Frontend
• PAYLOAD_HOST: Hostdomain of the CMS
• PAYLOAD_URL: URL of the CMS
• NAME: Name of the Container and Project

Please remember to set these secrets and variables in your repository settings to ensure a successful deployment through Github Workflows.

Once the secrets and variables are set on GitHub, they will replace the existing ones in the .env file on the server during deployment. This is done by the push.yml workflow, which replaces the placeholders in the .env with the actual secrets and variables defined in the repository settings. Please ensure that the names of your secrets and variables match with the placeholders in the .env file.

Getting started

To get started with Astroad, you'll need to have Docker and NPM || Yarn || PNPM installed on your machine.

You have two options for getting the repository:

1. Use the 'Use this template' button on the Github repository. This will create a new repository in your Github account with the same directory structure and files as Astroad. After the new repository is created, you can clone it to your local machine.
2. Alternatively, you can directly clone the Astroad repository: git clone https://github.com/mooxl/astroad.git. If you choose this option, remember to change the origin of your remote repository to a new one to avoid pushing changes directly to the Astroad repository. This can be done with the command: git remote set-url origin https://github.com/USERNAME/REPOSITORY.git where USERNAME is your username and REPOSITORY is the name of your new repository.

Once you've cloned the repository or created your own from the template, follow these steps:

1. Change into the repository directory: cd {newName}
2. Start the containers: yarn dev

This will start up the Astro, Payloadcms and Mongo containers and make them available on your local machine. Astro will be served at http://localhost:3000 and the Payload will be available at http://localhost:3001.

Development

The docker-compose.yml and docker-compose-dev.yml files includes everything you need to run the containers. The containers use the environment variables declared in the .env file and mounted volumes to store data persistently even after the containers are stopped and started.

Deployment

Deployment is handled by a Github Actions Workflow on every push. It logs into the server via SSH, pulls or clones the latest version of the repository, and runs yarn prod.

Because Astro is completely static, a content change in the CMS must trigger a new build of Astro. Therefore, there’s a payload.yml workflow that gets triggered by a webhook after every content change from Payload.

Ensure you have Traefik set up as a reverse proxy before deployment. The prod script will launch your site in a production-ready environment.

astroad's Issues

Support Vercel?

Can you tell me if deployment to versel is supported? As far as I know, docker containers are not supported there, would like to check with you for more details

How to create the server?

Thanks a lot for creating this! I'm totally unexperienced with Docker and therefore it is not clear to me how to deploy this.

How I understand it I must create a server somewhere and get the USER, HOST and KEY, then the rest goes automatically via Github Actions. What would be the easiest wat way to create such a server? (I have only used tools like Vercel for hosting till now).

Does this host only Payload or the Astro project too? If so, does it support a multi-tenant app with payload (https://payloadcms.com/blog/how-to-build-a-multi-tenant-app-with-payload)

Would apperiate the help! :)

Initial run of `yarn dev` triggers errors on a fresh install on Win 11

This is a really handy way of getting started with Payload and Astro, which otherwise requires a bunch of moving parts. But both times I've first run yarn dev after downloading the repo and then hitting localhost, the process crashes. Seems like just killing it and running it again works, so there's maybe some timing issue.

I've installed with npx degit mooxl/astroad my-test, which should just download a clean copy of the repo.

Then I go into my-test and run yarn dev. After all the docker logs, the containers start, and the log messages seem to stop, like everything is set up. Among the mongo logs, I see the logs for Astro, like:

astroad-astro    |   🚀  astro  v2.10.12 started in 714ms
astroad-astro    |
astroad-astro    |   ┃ Local    http://localhost:3000/
astroad-astro    |   ┃ Network  http://172.22.0.3:3000/

So I hit localhost:3000, but that shows an error in the logs:

astroad-astro    |  error   Unexpected token '<', "<!DOCTYPE "... is not valid JSON
astroad-astro    |   File:
astroad-astro    |     /base/src/utils/payload.ts:8:4
astroad-astro    |   Code:
astroad-astro    |     7 | export const getPosts = async () =>
astroad-astro    |     > 8 |   (await (await fetch(`${url}/api/posts`)).json()).docs as Post[];
astroad-astro    |          |    ^
astroad-astro    |       10 | export const getPost = async (id: string) =>
astroad-astro    |       11 |   (await (await fetch(`${url}/api/posts/${id}`)).json()) as Post;
astroad-astro    |   Stacktrace:
astroad-astro    | SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
astroad-astro    |     at JSON.parse (<anonymous>)
astroad-astro    |     at parseJSONFromBytes (node:internal/deps/undici/undici:5329:19)
astroad-astro    |     at successSteps (node:internal/deps/undici/undici:5300:27)
astroad-astro    |     at fullyReadBody (node:internal/deps/undici/undici:1447:9)
astroad-astro    |     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
astroad-astro    |     at async specConsumeBody (node:internal/deps/undici/undici:5309:7)
astroad-astro    |     at async Module.getPosts (/base/src/utils/payload.ts:8:4)
astroad-astro    |     at async eval (/base/src/pages/index.astro:5:15)
astroad-astro    |     at async callComponentAsTemplateResultOrResponse (file:///base/node_modules/astro/dist/runtime/server/render/astro/render.js:85:25)
astroad-astro    |     at async renderToReadableStream (file:///base/node_modules/astro/dist/runtime/server/render/astro/render.js:35:26)
astroad-astro    |

After that, I see a message about MongoDB being ready, so maybe it was still starting when I hit the page?

astroad-mongo    |
astroad-mongo    | MongoDB init process complete; ready for start up.
astroad-mongo    |

And a little below that there's a crash from payload:

astroad-payload  | [22:04:22] ERROR (payload): Error: cannot connect to MongoDB. Details: connect ECONNREFUSED 172.23.0.2:27017
astroad-payload  | [nodemon] app crashed - waiting for file changes before starting...

But if I then just hit ctrl-C and run yarn dev again, everything works fine. I'm guessing that maybe mongo wasn't fully set up when Payload was trying to connect to it on first install, and on the second launch it was. But I'm not sure how to debug that.

The above logs were from my second attempt. The first time I also got an Astro error, but a different one. The effect was the same, though.

astroad-astro    |  error   fetch failed
astroad-astro    |   File:
astroad-astro    |     /base/src/utils/payload.ts:8:11
astroad-astro    |   Code:
astroad-astro    |     7 | export const getPosts = async () =>
astroad-astro    |     > 8 |   (await (await fetch(`${url}/api/posts`)).json()).docs as Post[];
astroad-astro    |          |           ^
astroad-astro    |       10 | export const getPost = async (id: string) =>
astroad-astro    |       11 |   (await (await fetch(`${url}/api/posts/${id}`)).json()) as Post;
astroad-astro    |   Stacktrace:
astroad-astro    | TypeError: fetch failed
astroad-astro    |     at node:internal/deps/undici/undici:12344:11
astroad-astro    |     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
astroad-astro    |     at async Module.getPosts (/base/src/utils/payload.ts:8:11)
astroad-astro    |     at async eval (/base/src/pages/index.astro:5:15)
astroad-astro    |     at async callComponentAsTemplateResultOrResponse (file:///base/node_modules/astro/dist/runtime/server/render/astro/render.js:85:25)
astroad-astro    |     at async renderToReadableStream (file:///base/node_modules/astro/dist/runtime/server/render/astro/render.js:35:26)
astroad-astro    |     at async renderPage (file:///base/node_modules/astro/dist/runtime/server/render/page.js:31:12)
astroad-astro    |     at async renderPage (file:///base/node_modules/astro/dist/core/render/core.js:43:18)
astroad-astro    |     at async tryRenderRoute (file:///base/node_modules/astro/dist/core/render/core.js:82:16)
astroad-astro    |     at async handleRoute (file:///base/node_modules/astro/dist/vite-plugin-astro-server/route.js:154:18)
astroad-astro    |
astroad-astro    |   Cause:
astroad-astro    | Error: connect ECONNREFUSED 172.21.0.2:3001
astroad-astro    |     at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1595:16)
astroad-astro    |
astroad-astro    | 07:17:45 AM [serve] 404                             /favicon.ico

Full logs: astroad logs.txt

Development Environment Build Fails

Hey there, I'm trying to build the project for the repo in the development format, and I'm getting Yarn issues and I'm not entirely sure how to track it down.

Node version: v21.4.0

It seems to be driven from Sharp dev dependency.

Is this being driven from the yarn.lock file in the frontend directory?

Error:

=> ERROR [payload base 4/5] RUN yarn install --frozen-lockfile                                                                                                                         15.3s
------
 > [payload base 4/5] RUN yarn install --frozen-lockfile:
0.451 yarn install v1.22.19
0.512 [1/4] Resolving packages...
0.753 [2/4] Fetching packages...
11.01 [3/4] Linking dependencies...
11.02 warning " > [email protected]" has unmet peer dependency "@types/node@*".
11.04 warning Workspaces can only be enabled in private projects.
14.30 [4/4] Building fresh packages...
14.55 error /base/node_modules/sharp: Command failed.
14.55 Exit code: 1
14.55 Command: (node install/libvips && node install/dll-copy && prebuild-install) || (node install/can-compile && node-gyp rebuild && node install/dll-copy)
14.55 Arguments:
14.55 Directory: /base/node_modules/sharp
14.55 Output:
14.55 sharp: Installation error: Invalid Version: 1.2.4_git20230717
14.55 sharp: Please see https://sharp.pixelplumbing.com/install for required dependencies
14.55 info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
------
failed to solve: process "/bin/sh -c yarn install --frozen-lockfile" did not complete successfully: exit code: 1
error Command failed with exit code 17.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.