🎨 Design System - Nuxt, Vue & Storybook

A Dockerized playground for developing a design system with Nuxt.js, Vue 3, and Storybook, utilizing the Bun runtime for a streamlined development experience.

---

🚀 Features

• Dockerized Environment: Ensures consistent setup across machines.
• Bun Runtime: Fast and efficient JavaScript runtime.
• Nuxt.js + Vue 3: Build a scalable, performant design system.
• Storybook Integration: Develop UI components in isolation.
• Makefile Automation: Simplifies Docker commands for easy management.

---

🛠 Prerequisites

Ensure the following are installed:

• Docker (latest version)
• Docker Compose (latest version)
• Make (usually pre-installed on UNIX systems)

---

🗂 Project Structure

/project-root
│
├── Makefile
├── docker-compose.yml
├── Dockerfile
├── .env
├── entrypoint.sh
└── app/
    └── [Your project files]

---

⚙️ Setup & Installation

Follow these steps to set up the environment:

1. Clone the Repository

git clone https://github.com/yourusername/plant-assistant.git
cd plant-assistant

2. Create the .env File

In the root directory, create a .env file with the following content:

# .env

SERVICE_NAME=design-system
IMAGE=design-system:latest
NODE_ENV=development
HOST=0.0.0.0

3. Build the Docker Image

make build

4. Make entrypoint.sh Executable

chmod +x entrypoint.sh

5. Start the Docker Containers

make up

If the app directory is empty, the container will start and wait, allowing you to initialize your project.

---

🧑‍💻 Usage

Use the Makefile for easy management of Docker services:

Command	Description
make build	Build the Docker images
make up	Start the services in detached mode
make upb	Start with build
make down	Stop all services
make bash	Enter the container’s shell
make logs	View logs
make clean	Remove all containers, images, volumes, and orphans

Example Commands:

• Initialize the Project:

  make init

• Enter the Container's Shell:

  make bash

• Access Your Application:

  After initializing the project, access it at http://localhost:3000.

---

📐 Development Workflow

1. Build and Start Services:

   make build
   make up

2. Initialize Nuxt.js Project:

   make bash
   # Inside container:
   bun init

3. Manage Services:

   • View logs: make logs
   • Restart services: make restart
   • Stop services: make down

---

🔧 Ports & Environment Variables

Exposed Ports

• 3000: Nuxt.js development server
• 6006: Storybook

Environment Variables

Defined in the .env file:

• SERVICE_NAME: Service name
• IMAGE: Docker image name
• NODE_ENV: Node environment
• HOST: Host address (0.0.0.0)

---

🛠 Troubleshooting

• Permission Denied for entrypoint.sh: Ensure the script has execute permissions:

  chmod +x entrypoint.sh

• Ports Already in Use: Modify docker-compose.yml if ports are in use.

---

📚 Resources

• Nuxt.js Documentation
• Vue 3 Documentation
• Storybook Documentation

---

🤝 Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

---

📄 License

This project is licensed under the MIT License.

---

Made with ❤️ by lafllamme