Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sidhyaashu/docker-server-client-starter-template
https://github.com/sidhyaashu/docker-server-client-starter-template
Last synced: 5 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/sidhyaashu/docker-server-client-starter-template
- Owner: sidhyaashu
- Created: 2024-12-17T16:26:06.000Z (6 days ago)
- Default Branch: sidhya
- Last Pushed: 2024-12-17T16:31:50.000Z (6 days ago)
- Last Synced: 2024-12-17T17:33:24.612Z (6 days ago)
- Language: Dockerfile
- Size: 1.95 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Step 1: Create Next.js Project Using Docker:
```bash
docker run -it --rm -v ${PWD}:/app -w /app node:18-alpine npx create-next-app@latest client
```
# Dockerfile for Next.js (in client folder):
```dockerfile
# Use Node.js image
FROM node:18-alpine
# Set the working directory for the Next.js app
WORKDIR /app
# Copy package.json and package-lock.json
COPY package*.json ./
# Install dependencies
RUN npm install
# Copy the rest of the Next.js app files
COPY . .
# Expose port 3000 for the Next.js app
EXPOSE 3000
# Run Next.js development server
CMD ["npm", "run", "dev"]
```
# Step 2: Create the Express Server:
```bash
mkdir server
cd server
```
# Create a new package.json and install Express using Docker:
```bash
docker run -it --rm -v ${PWD}:/app -w /app node:18-alpine npm init -y
```
# For single dependencies:
```bash
docker run -it --rm -v ${PWD}:/app -w /app node:18-alpine npm install express
```
# Now manually create dependencies in both client and server and add required dependencies like:
1. client/dependencies.txt
```plaintext
axios
react-icons
```
2. server/dependencies.txt
```plaintext
express
nodemon
cors
dotenv
```
# Step 3: Create Dockerfiles for Next.js and Express
# Dockerfile for Next.js (in client folder):
```dockerfile
# Use Node.js image
FROM node:18-alpine
# Set the working directory for the Next.js app
WORKDIR /app
# Copy package.json and package-lock.json
COPY package*.json ./
# Install dependencies
RUN npm install
# Copy the rest of the Next.js app files
COPY . .
# Expose port 3000 for the Next.js app
EXPOSE 3000
# Run Next.js development server
CMD ["npm", "run", "dev"]
```
# Dockerfile for Express (in server folder):
```dockerfile
# Use Node.js image
FROM node:18-alpine
# Set the working directory for the Express server
WORKDIR /app
# Copy package.json and package-lock.json
COPY package*.json ./
# Install dependencies
RUN npm install
# Copy the rest of the Express server files
COPY . .
# Expose port 4000 for the Express server
EXPOSE 4000
# Run the Express server
CMD ["node", "index.js"]
```
# Step 4: Combine Everything with Docker Compose (docker-compose.yml)
```yaml
version: "3.8"
services:
nextjs-app:
container_name: nextjs-dev
build: ./client
ports:
- "3000:3000"
volumes:
- ./client:/app
- /app/node_modules
command: ["npm", "run", "dev"]
express-server:
container_name: express-dev
build: ./server
ports:
- "4000:4000"
volumes:
- ./server:/app
- /app/node_modules
command: ["node", "index.js"]
```
# Folder Structure
```plaintext
project-root
├── docker-compose.yml
├── client
│ ├── Dockerfile
│ ├── package.json
│ └── (other Next.js app files)
├── server
│ ├── Dockerfile
│ ├── package.json
│ └── (other Express server files)
```
# Step 5: Build and Run Both Containers
```bash
docker-compose up --build
```
# Example: Install Multiple Dependencies
1. For Next.js Project:
```bash
docker-compose run nextjs-app npm install axios react-icons
```
2. For Express Server:
```bash
docker-compose run express-server npm install express nodemon cors dotenv
```
# To Stop the Server:
```bash
docker-compose down
```
```bash
npm i lucide-react uuid dotenv date-fns framer-motion react-hook-form zod @hookform/resolvers @hello-pangea/dnd --legacy-peer-deps
npm i -D @types/node @types/uuid --legacy-peer-deps
npx shadcn@latest init -d
npx shadcn@latest add accordion avatar button card dialog form input label navigation-menu popover progress select sidebar separator sheet skeleton switch table tabs textarea toggle tooltip
npm i -D prettier-plugin-tailwindcss --legacy-peer-deps
```