fix: Use only dist folder (contains public assets)
- Astro build automatically copies public/ to dist/ - Remove separate public folder copy (not needed) - Use PORT environment variable (default 80) - Fix favicon 404 by using correct dist structure
This commit is contained in:
Kunthawat Greethong
140
README.md
140
README.md
@@ -1,125 +1,43 @@
|
||||
# Deal Plus Tech - Next.js Website
|
||||
# Astro Starter Kit: Minimal
|
||||
|
||||
Complete redesign of dealplustech.co.th website built with Next.js 14, TypeScript, and Tailwind CSS.
|
||||
|
||||
## Features
|
||||
|
||||
- 🚀 Next.js 14 with App Router
|
||||
- 💅 Tailwind CSS for styling
|
||||
- 📝 Headless WordPress integration for Blog
|
||||
- 🌐 Thai URL support for product categories
|
||||
- 📱 Fully responsive design
|
||||
- 🔍 SEO optimized
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- Node.js 18.17 or later
|
||||
- npm or yarn
|
||||
|
||||
### Installation
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```sh
|
||||
npm create astro@latest -- --template minimal
|
||||
```
|
||||
|
||||
### Environment Variables
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
|
||||
Copy `.env.example` to `.env.local` and fill in your values:
|
||||
## 🚀 Project Structure
|
||||
|
||||
```bash
|
||||
cp .env.example .env.local
|
||||
Inside of your Astro project, you'll see the following folders and files:
|
||||
|
||||
```text
|
||||
/
|
||||
├── public/
|
||||
├── src/
|
||||
│ └── pages/
|
||||
│ └── index.astro
|
||||
└── package.json
|
||||
```
|
||||
|
||||
Required environment variables:
|
||||
- `NEXT_PUBLIC_WORDPRESS_API_URL` - Your WordPress REST API URL (e.g., https://your-domain.com/wp-json/wp/v2)
|
||||
- `NEXT_PUBLIC_SITE_URL` - Your production site URL
|
||||
- `NEXT_PUBLIC_PHONE` - Contact phone number
|
||||
- `NEXT_PUBLIC_EMAIL` - Contact email
|
||||
- `NEXT_PUBLIC_LINE_ID` - LINE ID for contact
|
||||
- `NEXT_PUBLIC_FACEBOOK_URL` - Facebook page URL
|
||||
- `NEXT_PUBLIC_COMPANY_ADDRESS` - Company address
|
||||
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
|
||||
|
||||
### Development
|
||||
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
Any static assets, like images, can be placed in the `public/` directory.
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) in your browser.
|
||||
## 🧞 Commands
|
||||
|
||||
### Production Build
|
||||
All commands are run from the root of the project, from a terminal:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
npm start
|
||||
```
|
||||
| Command | Action |
|
||||
| :------------------------ | :----------------------------------------------- |
|
||||
| `npm install` | Installs dependencies |
|
||||
| `npm run dev` | Starts local dev server at `localhost:4321` |
|
||||
| `npm run build` | Build your production site to `./dist/` |
|
||||
| `npm run preview` | Preview your build locally, before deploying |
|
||||
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
|
||||
| `npm run astro -- --help` | Get help using the Astro CLI |
|
||||
|
||||
## Project Structure
|
||||
## 👀 Want to learn more?
|
||||
|
||||
```
|
||||
src/
|
||||
├── app/ # Next.js App Router pages
|
||||
│ ├── layout.tsx # Root layout
|
||||
│ ├── page.tsx # Homepage
|
||||
│ ├── about-us/ # About page
|
||||
│ ├── services/ # Services page
|
||||
│ ├── portfolio/ # Portfolio page
|
||||
│ ├── contact-us/ # Contact page
|
||||
│ ├── all-projects/ # FAQ page
|
||||
│ ├── product/ # Products listing
|
||||
│ ├── blog/ # Blog pages
|
||||
│ └── [[...slug]]/ # Product category catch-all
|
||||
├── components/
|
||||
│ ├── layout/ # Header, Footer, FloatingContact
|
||||
│ ├── sections/ # Page sections
|
||||
│ └── ui/ # UI components
|
||||
├── lib/
|
||||
│ ├── utils.ts # Utility functions
|
||||
│ └── wordpress.ts # WordPress API client
|
||||
├── types/
|
||||
│ └── index.ts # TypeScript types
|
||||
├── data/
|
||||
│ └── site-config.ts # Site configuration
|
||||
└── styles/
|
||||
└── globals.css # Global styles
|
||||
```
|
||||
|
||||
## Deployment
|
||||
|
||||
### Vercel (Recommended)
|
||||
|
||||
1. Push your code to GitHub
|
||||
2. Import your repository on Vercel
|
||||
3. Add environment variables in Vercel dashboard
|
||||
4. Deploy!
|
||||
|
||||
### Other Platforms
|
||||
|
||||
The project can be deployed to any platform that supports Next.js:
|
||||
- Netlify
|
||||
- AWS Amplify
|
||||
- Docker
|
||||
- Self-hosted Node.js server
|
||||
|
||||
## WordPress Integration
|
||||
|
||||
This site uses WordPress as a headless CMS for the Blog section.
|
||||
|
||||
### Setup WordPress
|
||||
|
||||
1. Install WordPress on your server
|
||||
2. Ensure the REST API is enabled (default in modern WordPress)
|
||||
3. Set `NEXT_PUBLIC_WORDPRESS_API_URL` to your WordPress API endpoint
|
||||
4. Create posts with featured images for best display
|
||||
|
||||
### API Endpoints Used
|
||||
|
||||
- `/posts` - Blog posts
|
||||
- `/categories` - Post categories
|
||||
- `/_embed` - Embedded author and media data
|
||||
|
||||
## License
|
||||
|
||||
Private project for Deal Plus Tech Co., Ltd.
|
||||
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||
|
||||
Reference in New Issue
Block a user