lool
Signed-off-by: Max Schmidt <max.schmidt@outlook.de>
This commit is contained in:
Max Schmidt
parent
7f01d39909
commit
d30d3e61b9
2
.env.dev
2
.env.dev
@ -1,3 +1,4 @@
|
||||
ASTRO_TO_PAYLOAD_URL=http://payload:3001
|
||||
PAYLOAD_SECRET=supersecretkey
|
||||
PAYLOAD_URL=http://localhost:3001
|
||||
PAYLOAD_PORT=3001
|
||||
@ -5,5 +6,4 @@ MONGODB_URI=mongodb://payload:test@mongo:27017
|
||||
MONGODB_USER=payload
|
||||
MONGODB_PW=test
|
||||
MONGODB_DB=payload
|
||||
|
||||
NAME=astroad
|
||||
3
.gitignore
vendored
3
.gitignore
vendored
@ -1 +1,2 @@
|
||||
data
|
||||
data
|
||||
yarn.lock
|
||||
29
README.md
Normal file
29
README.md
Normal file
@ -0,0 +1,29 @@
|
||||
# Astroad
|
||||
|
||||
Astroad is a pre-configured setup for Astro and Payloadcms that makes it easy to get started with building your website. With Astroad, you'll have a complete development environment that you can run locally using Docker. This makes it easy to test and develop your website before deploying it to a production environment.
|
||||
|
||||
When you're ready to deploy the website on your own server, Astrotus comes with a production environment that requires the use of Traefik as a reverse proxy. This setup provides a secure and scalable production environment for your website.
|
||||
|
||||
## Getting started
|
||||
|
||||
To get started with Astroad, you'll need to have Docker and NPM || Yarn || PNPM installed on your machine.
|
||||
|
||||
1. Clone this repository: `git clone https://github.com/mooxl/astroad.git`
|
||||
2. Change into the repository directory: `cd astroad`
|
||||
3. 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.dev` file and mounted volumes to store data persistently even after the containers are stopped and started.
|
||||
|
||||
## Deployment
|
||||
|
||||
When you're ready to deploy your website to a production environment, you'll should copy the `.env.dev` and rename it into `.env.prod`. Then you modify the file to suit your needs. This file contains the configuration for the Astro, Payload, Mongo, GitHub Workflow and Traefik.
|
||||
|
||||
Deployment is handled by a Github Actions Workflow on every push on branch `prod`. 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.
|
||||
@ -1 +1,2 @@
|
||||
node_modules
|
||||
yarn.lock
|
||||
|
||||
BIN
astro/public/fonts/Plex-Bold.woff2
Normal file
BIN
astro/public/fonts/Plex-Bold.woff2
Normal file
Binary file not shown.
BIN
astro/public/fonts/Plex-Regular.woff2
Normal file
BIN
astro/public/fonts/Plex-Regular.woff2
Normal file
Binary file not shown.
@ -2,6 +2,27 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
h1 {
|
||||
@apply text-4xl;
|
||||
@font-face {
|
||||
font-family: "Plex";
|
||||
src: url("/fonts/Plex-Regular.woff2") format("woff2");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Plex";
|
||||
src: url("/fonts/Plex-Bold.woff2") format("woff2");
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-6xl font-bold;
|
||||
}
|
||||
h2 {
|
||||
@apply text-4xl font-bold;
|
||||
}
|
||||
h3 {
|
||||
@apply text-xl font-bold;
|
||||
}
|
||||
|
||||
@ -14,7 +14,7 @@ const { title } = Astro.props;
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body class="bg-teal-950 text-yellow-100">
|
||||
<body class="font-plex bg-gray max-w-7xl mx-auto py-8 text-gray-200">
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,22 +5,41 @@ import { getPosts } from "../utils/payload";
|
||||
const posts = await getPosts();
|
||||
---
|
||||
|
||||
<Layout title="Welcome to Astroad">
|
||||
<main class="flex flex-col items-center py-10 gap-5">
|
||||
<h1>This is Astroad</h1>
|
||||
{
|
||||
posts ? (
|
||||
posts.reverse().map((post) => (
|
||||
<a href={`/posts/${post.id}`}>
|
||||
<article class="text-teal-950 bg-yellow-100 px-5 py-3 rounded-md shadow-md w-64 text-center">
|
||||
<h2>{post.title}</h2>
|
||||
<p>{new Date(post.updatedAt).toLocaleDateString("de-DE")}</p>
|
||||
</article>
|
||||
</a>
|
||||
))
|
||||
) : (
|
||||
<p>No posts...</p>
|
||||
)
|
||||
}
|
||||
<Layout title="Astroad">
|
||||
<main class="">
|
||||
<h1>Astroad</h1>
|
||||
<p class="mt-3 text-lg">
|
||||
Astroad is a pre-configured setup for Astro and Payloadcms that makes it
|
||||
easy to get started with building your website. With Astroad, you'll have
|
||||
a complete development environment that you can run locally using Docker.
|
||||
This makes it easy to test and develop your website before deploying it to
|
||||
a production environment.
|
||||
<br />
|
||||
When you're ready to deploy the website on your own server, Astrotus comes
|
||||
with a production environment that requires the use of Traefik as a reverse
|
||||
proxy. This setup provides a secure and scalable production environment for
|
||||
your website.
|
||||
</p>
|
||||
<h2 class="mt-6">Posts</h2>
|
||||
<div class="grid grid-cols-3 mt-3">
|
||||
{
|
||||
posts.length > 0 ? (
|
||||
posts.reverse().map((post) => (
|
||||
<a href={`/posts/${post.id}`}>
|
||||
<article class="text-gray bg-gray-light px-5 py-3 rounded-md shadow-md w-64 text-center hover:-translate-y-1 transition-transform">
|
||||
<h3>{post.title}</h3>
|
||||
{post.publishedDate && (
|
||||
<p>
|
||||
{new Date(post.publishedDate).toLocaleDateString("de-DE")}
|
||||
</p>
|
||||
)}
|
||||
</article>
|
||||
</a>
|
||||
))
|
||||
) : (
|
||||
<p>Add Posts in Payloadcms</p>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
@ -18,8 +18,8 @@ const post = id && (await getPost(id));
|
||||
|
||||
{
|
||||
post ? (
|
||||
<Layout title={post.title!}>
|
||||
<div class="max-w-3xl mx-auto space-y-3 my-3">
|
||||
<Layout title={`Astroad | ${post.title!}`}>
|
||||
<div class="space-y-3 my-3">
|
||||
<a href="/">BACK</a>
|
||||
<h1>{post.title}</h1>
|
||||
{post.content && <Content content={post.content} />}
|
||||
|
||||
@ -1,8 +1,20 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
|
||||
theme: {
|
||||
fontFamily: {
|
||||
plex: ["Plex", "sans-serif"],
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
gray: {
|
||||
DEFAULT: "#111111",
|
||||
light: "#888888",
|
||||
dark: "#222222",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
safelist: [],
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
services:
|
||||
astro:
|
||||
build:
|
||||
context: astro
|
||||
target: dev
|
||||
volumes:
|
||||
- ./astro/src:/base/src
|
||||
- .env.development:/base/.env.development
|
||||
- ./astro/public:/base/public
|
||||
- ./astro/astro.config.mjs:/base/astro.config.mjs
|
||||
- ./astro/tailwind.config.cjs:/base/tailwind.config.cjs
|
||||
ports:
|
||||
- 3000:3000
|
||||
|
||||
payload:
|
||||
build:
|
||||
context: payload
|
||||
target: dev
|
||||
volumes:
|
||||
- ./payload/src:/base/src
|
||||
|
||||
@ -2,31 +2,33 @@ services:
|
||||
astro:
|
||||
container_name: ${NAME}-astro
|
||||
restart: unless-stopped
|
||||
build:
|
||||
context: astro
|
||||
networks:
|
||||
- hallo
|
||||
- front
|
||||
depends_on:
|
||||
- payload
|
||||
|
||||
payload:
|
||||
container_name: ${NAME}_payload
|
||||
container_name: ${NAME}-payload
|
||||
restart: unless-stopped
|
||||
build:
|
||||
context: ./payload
|
||||
dockerfile: Dockerfile
|
||||
context: payload
|
||||
volumes:
|
||||
- ./data/media:/app/dist/media
|
||||
environment:
|
||||
PORT: ${PAYLOAD_PORT}
|
||||
PAYLOAD_PORT: ${PAYLOAD_PORT}
|
||||
PAYLOAD_SECRET: ${PAYLOAD_SECRET}
|
||||
MONGODB_URI: ${MONGODB_URI}
|
||||
PAYLOAD_URL: ${PAYLOAD_URL}
|
||||
networks:
|
||||
- hallo
|
||||
- test
|
||||
- front
|
||||
- back
|
||||
depends_on:
|
||||
- mongo
|
||||
|
||||
mongo:
|
||||
container_name: ${NAME}_mongo
|
||||
container_name: ${NAME}-mongo
|
||||
image: mongo:6.0.5
|
||||
volumes:
|
||||
- ./data/mongo:/data/db
|
||||
@ -36,8 +38,8 @@ services:
|
||||
MONGO_INITDB_ROOT_USERNAME: ${MONGODB_USER}
|
||||
MONGO_INITDB_ROOT_PASSWORD: ${MONGODB_PW}
|
||||
networks:
|
||||
- test
|
||||
- back
|
||||
|
||||
networks:
|
||||
hallo:
|
||||
test:
|
||||
front:
|
||||
back:
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
{
|
||||
"tasks": {
|
||||
"name": "astrotus",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"dev": "docker compose -f docker-compose.yml -f docker-compose-dev.yml --env-file .env.dev up -d",
|
||||
"prod": "docker compose -f docker-compose.yml -f docker-compose-prod.yml --env-file .env.prod up -d --build",
|
||||
"stop": "docker compose -f docker-compose.yml -f docker-compose-dev.yml --env-file .env.dev down && docker compose -f docker-compose.yml -f docker-compose-prod.yml --env-file .env.prod down",
|
||||
"dump": "docker exec -i astrotus_database /bin/sh -c 'PGPASSWORD=password pg_dump --username directus directus' > ./dump.sql"
|
||||
}
|
||||
}
|
||||
@ -4,12 +4,10 @@ import payload from "payload";
|
||||
require("dotenv").config();
|
||||
const app = express();
|
||||
|
||||
// Redirect root to Admin panel
|
||||
app.get("/", (_, res) => {
|
||||
res.redirect("/admin");
|
||||
});
|
||||
|
||||
// Initialize Payload
|
||||
payload.init({
|
||||
secret: process.env.PAYLOAD_SECRET,
|
||||
mongoURL: process.env.MONGODB_URI,
|
||||
@ -18,7 +16,4 @@ payload.init({
|
||||
payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`);
|
||||
},
|
||||
});
|
||||
|
||||
// Add your own express routes here
|
||||
|
||||
app.listen(process.env.PAYLOAD_PORT);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user