Richard Bergsma
db6270438f
- Added new npm scripts for production testing with Content Security Policy: `dev:prod` and `preview:prod`. - Updated README.md to include detailed instructions for development, production testing, and a pre-deployment checklist to ensure security settings are verified before deployment.
177 lines
5.6 KiB
Markdown
177 lines
5.6 KiB
Markdown
# 🌍 365DevNet Website
|
||
|
||
Welcome to the source code for the official **365DevNet** website — built by and for freelancers, small businesses, and entrepreneurs who want reliable, clear, and modern IT services.
|
||
|
||
This website is powered by [Astro](https://astro.build/) and [Tailwind CSS](https://tailwindcss.com/), and is hosted on our own secure VPS infrastructure. It reflects our mission, values, and service offerings.
|
||
|
||
> 💡 Visit the live site: [https://365devnet.eu](https://365devnet.eu)
|
||
|
||
---
|
||
|
||
## 🧾 About 365DevNet
|
||
|
||
**365DevNet** is a Netherlands-based IT services company. We support individuals and small businesses with digital infrastructure that is easy to manage, cost-efficient, and built to scale with you.
|
||
|
||
Our core services include:
|
||
|
||
- 📦 **Microsoft 365 setup & migration** (mail, SharePoint, Teams, OneDrive)
|
||
- 🔁 **Process automation** using Power Automate and PowerShell
|
||
- 🌐 **Website development** with secure VPS deployment and modern tooling
|
||
- 🛡️ **Security and management** (DNS, domains, backups, access control)
|
||
- 📚 **Training and documentation** so clients stay in control
|
||
|
||
Learn more: [https://365devnet.eu/en](https://365devnet.eu/en)
|
||
|
||
---
|
||
|
||
## 🧠 Why This Stack?
|
||
|
||
We built this site with:
|
||
|
||
- [**Astro**](https://astro.build/) – Ultra-fast static site builder that ships zero JavaScript by default
|
||
- [**Tailwind CSS**](https://tailwindcss.com/) – Utility-first styling framework for full design control
|
||
- [**Markdown/MDX**](https://mdxjs.com/) – For simple, content-friendly editing
|
||
- [**Custom VPS hosting**](https://transip.eu) – Gives us control over performance, pricing, and security
|
||
|
||
> ✅ We believe in owning our tech and reducing platform dependency.
|
||
|
||
---
|
||
|
||
## 🗂 Project Structure
|
||
|
||
```plaintext
|
||
/
|
||
├── public/ # Static assets (robots.txt, icons)
|
||
├── src/
|
||
│ ├── assets/ # Local images, styles, favicons
|
||
│ ├── components/ # Reusable UI components
|
||
│ ├── content/ # Blog posts and markdown pages
|
||
│ ├── layouts/ # Page templates
|
||
│ ├── pages/ # Route-based pages (e.g. index.astro)
|
||
│ └── config.yaml # SEO, metadata, i18n settings
|
||
├── package.json # Project dependencies and scripts
|
||
├── astro.config.ts # Astro configuration
|
||
└── README.md # You're reading it 🙂
|
||
```
|
||
---
|
||
|
||
## 🎨 Theme & Credits
|
||
|
||
This website was originally built on top of **[AstroWind](https://github.com/onwidget/astrowind)** — the most starred and forked Astro theme from 2022–2024. It’s a modern, production-ready template that combines [Astro](https://astro.build/) with [Tailwind CSS](https://tailwindcss.com/) and is designed with performance and best practices in mind.
|
||
|
||
AstroWind is an open-source project created and maintained by [onWidget](https://onwidget.com) and the amazing open-source community:
|
||
|
||
- ⭐ GitHub: [onwidget/astrowind](https://github.com/onwidget/astrowind)
|
||
- 💬 Community discussions: [AstroWind Discussions](https://github.com/onwidget/astrowind/discussions)
|
||
- 📄 License: [MIT License](https://github.com/onwidget/astrowind/blob/main/LICENSE.md)
|
||
|
||
We’ve adapted the template to reflect the unique mission and brand identity of 365DevNet, while continuing to follow the project's great structure and standards.
|
||
|
||
---
|
||
|
||
## 🔐 Environment Variables
|
||
|
||
Create a .env file and keep it out of version control. Example:
|
||
|
||
```env
|
||
# Email
|
||
# For Microsoft 365 / Office 365:
|
||
SMTP_HOST=smtp.office365.com
|
||
SMTP_PORT=587
|
||
SMTP_USER=your-email@yourdomain.com
|
||
SMTP_PASS=your-app-password
|
||
# OR use OAuth2 (recommended for Microsoft 365):
|
||
# OAUTH2_CLIENT_ID=your-client-id
|
||
# OAUTH2_CLIENT_SECRET=your-client-secret
|
||
# OAUTH2_REFRESH_TOKEN=your-refresh-token
|
||
# OAUTH2_ACCESS_TOKEN=your-access-token (optional)
|
||
|
||
# For generic SMTP or Mailcow:
|
||
# SMTP_HOST=your-smtp-server
|
||
# SMTP_PORT=587
|
||
# SMTP_USER=your-username
|
||
# SMTP_PASS=your-password
|
||
|
||
ADMIN_EMAIL=your-email@yourdomain.com
|
||
WEBSITE_NAME=
|
||
|
||
# Monitoring
|
||
UPTIME_KUMA_URL=
|
||
|
||
# SCM
|
||
GITEA_TOKEN=
|
||
|
||
# AI (optional)
|
||
GEMINI_API_KEY=
|
||
|
||
# Security - Content Security Policy
|
||
# Set to 1 to enable CSP (use for production testing)
|
||
# ENABLE_SSR_CSP=1
|
||
```
|
||
|
||
---
|
||
|
||
## 🚀 Development & Testing
|
||
|
||
### Quick Start
|
||
```bash
|
||
# Install dependencies
|
||
npm install
|
||
|
||
# Start development server (fast, no CSP)
|
||
npm run dev
|
||
|
||
# Visit http://localhost:4321
|
||
```
|
||
|
||
### **⚠️ IMPORTANT: Pre-Deployment Testing**
|
||
|
||
**Always test with production security settings before deploying:**
|
||
|
||
```bash
|
||
# Test with CSP enabled (matches production)
|
||
npm run dev:prod
|
||
```
|
||
|
||
This will:
|
||
- Build the production bundle
|
||
- Run with `server.js` (same as Docker)
|
||
- Enable Content Security Policy (`ENABLE_SSR_CSP=1`)
|
||
- Help you catch security/CSP issues before deployment
|
||
|
||
### Available Commands
|
||
|
||
| Command | Description |
|
||
|---------|-------------|
|
||
| `npm run dev` | Development server (Astro dev, no CSP) |
|
||
| `npm run dev:prod` | **Production testing with CSP** ⚠️ Use before deploying! |
|
||
| `npm run build` | Build for production |
|
||
| `npm run preview:prod` | Preview built site with CSP enabled |
|
||
| `npm run start` | Start production server |
|
||
| `npm run check` | Run linting & type checking |
|
||
|
||
### 📋 Pre-Deployment Checklist
|
||
|
||
See [TESTING.md](./TESTING.md) for the complete testing guide and checklist.
|
||
|
||
**Quick checks:**
|
||
- [ ] Run `npm run dev:prod` locally
|
||
- [ ] Test mobile menu, language selector, theme switcher
|
||
- [ ] Check browser console for CSP violations
|
||
- [ ] Run `npm run check` for linting errors
|
||
|
||
---
|
||
|
||
## 🐳 Docker Deployment
|
||
|
||
The production environment runs in Docker with CSP enabled:
|
||
|
||
```bash
|
||
# Build and run with Docker Compose
|
||
docker-compose up -d
|
||
|
||
# View logs
|
||
docker-compose logs -f web
|
||
```
|
||
|
||
Environment variables are set in `docker-compose.yml` and `.env`. |