Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/chaudhuree/docarize-js-apps

Last synced: 4 days ago
JSON representation

Host: GitHub
URL: https://github.com/chaudhuree/docarize-js-apps
Owner: chaudhuree
Created: 2024-02-20T21:58:33.000Z (9 months ago)
Default Branch: main
Last Pushed: 2024-02-20T22:03:46.000Z (9 months ago)
Last Synced: 2024-02-20T23:23:34.908Z (9 months ago)
Language: JavaScript
Size: 94.7 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

**Set Up Environment Variables**

For a few specific applications, we require environment variables. I've included a sample .env.example file for these essential projects.
However, one crucial element needed for these projects is,

```env
DB_URL=
```

For full stack applications, we'll be using MongoDB as a database. So do create an account on [MongoDB Atlas](https://www.mongodb.com/) as well as
install [MongoDB Compass](https://www.mongodb.com/products/tools/compass) for creating local database instance for the project.

**Running the Project**

```bash
npm start
```

Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.

## 🕸️ Code Snippets

hello-docker/Dockerfile

```dockerfile
# select the base image to run the app. We want to run a javascript app, so we use the node runtime image from docker hub
# we can use any image from docker hub. We can also use a custom image that we have created
# node:20-alpine -> node is the image name, 20-alpine is the tag
# alpine is a lightweight version of linux
# we can see complete list of node image tags here: https://hub.docker.com/_/node
FROM node:20-alpine

# set the working directory to /app. This is the directory where the commands will be run. We can use any directory name but /app is a standard convention
WORKDIR /app

# copy everything from the current directory to the PWD (Present Working Directory) inside the container.
# First `.` is the path to the current directory on the host machine. Second `.` is the path to the current directory inside the container i.e., source and destination
# source - current directory on the host machine
# destination - current directory inside the container (/app)
COPY . .

# commands to run the app
CMD node hello.js

# build the image
# docker build -t hello-docker .
# -t -> tag the image with a name
# hello-docker -> name of the image
# . -> path to the Dockerfile
```

react-docker/Dockerfile

```dockerfile
# set the base image to create the image for react app
FROM node:20-alpine

# create a user with permissions to run the app
# -S -> create a system user
# -G -> add the user to a group
# This is done to avoid running the app as root
# If the app is run as root, any vulnerability in the app can be exploited to gain access to the host system
# It's a good practice to run the app as a non-root user
RUN addgroup app && adduser -S -G app app

# set the user to run the app
USER app

# set the working directory to /app
WORKDIR /app

# copy package.json and package-lock.json to the working directory
# This is done before copying the rest of the files to take advantage of Docker’s cache
# If the package.json and package-lock.json files haven’t changed, Docker will use the cached dependencies
COPY package*.json ./

# sometimes the ownership of the files in the working directory is changed to root
# and thus the app can't access the files and throws an error -> EACCES: permission denied
# to avoid this, change the ownership of the files to the root user
USER root

# change the ownership of the /app directory to the app user
# chown -R :
# chown command changes the user and/or group ownership of for given file.
RUN chown -R app:app .

# change the user back to the app user
USER app

# install dependencies
RUN npm install

# copy the rest of the files to the working directory
COPY . .

# expose port 5173 to tell Docker that the container listens on the specified network ports at runtime
EXPOSE 5173

# command to run the app
CMD npm run dev
```

vite-docker/Dockerfile

```dockerfile
# set the base image to create the image for react app
FROM node:20-alpine

# set the user to run the app
USER app

# set the working directory to /app
WORKDIR /app

# change the ownership of the /app directory to the app user
# chown -R :
# chown command changes the user and/or group ownership of for given file.
RUN chown -R app:app .

# change the user back to the app user
USER app

# install dependencies
RUN npm install

# copy the rest of the files to the working directory
COPY . .

# expose port 5173 to tell Docker that the container listens on the specified network ports at runtime
EXPOSE 5173

# command to run the app
CMD npm run dev
```

vite-docker/compose.yaml

```yaml
# define the services/containers to be run
services:
# define the application container/service
# we can use any name for the service. Here it is `web`
# we can create multiple services as well
web:
# specify the image to build the container from
# this can be any image available in docker hub or a custom one or the one we want to build
build:
# specify the path to the Dockerfile
context: .
# specify the file name (optional)
dockerfile: Dockerfile

# specify the port mapping from host to the container
# this is similar to the -p flag in `docker run` command
# first port is the port on host machine and the second is the port inside the container
ports:
- 5173:5173

# specify the volumes to mount
# what this does is it mounts the current directory to the `/app` directory inside the container.
# due to this, any changes made to the files in the current directory will be reflected inside the container. It is similar to the -v flag in `docker run` command.
# even if a container is stopped or deleted, volumes are not deleted and can be used by other containers as well.
volumes:
# over here, we are mounting the current directory to the `/app` directory inside the container (which is the working directory of the container)
# syntax is `:`
# we're doing this because we want to reflect the changes made to the files in the current directory inside the container
- .:/app
# we also mount the node_modules directory inside the container at /app/node_modules. This is done to avoid installing the node_modules inside the container.
# node_modules will be installed on the host machine and mounted inside the container
- /app/node_modules
```

mern-docker/frontend/Dockerfile

```dockerfile
FROM node:20-alpine3.18

# RUN addgroup app && adduser -S -G app app

# USER app

WORKDIR /app

COPY package*.json ./

# USER root

# RUN chown -R app:app .

# USER app

RUN npm install

COPY . .

EXPOSE 5173

CMD npm run dev
```

mern-docker/backend/Dockerfile

```dockerfile
FROM node:20-alpine3.18

RUN addgroup app && adduser -S -G app app

USER app

WORKDIR /app

COPY package*.json ./

# change ownership of the /app directory to the app user
USER root

# change ownership of the /app directory to the app user
# chown -R :
# chown command changes the user and/or group ownership of for given file.
RUN chown -R app:app .

# change the user back to the app user
USER app

RUN npm install

COPY . .

EXPOSE 8000

CMD npm start
```

mern-docker/compose.yaml

```yaml
# specify the version of docker-compose
version: "3.8"

# define the services/containers to be run
services:
# define the frontend service
# we can use any name for the service. A standard naming convention is to use "web" for the frontend
web:
# we use depends_on to specify that service depends on another service
# in this case, we specify that the web depends on the api service
# this means that the api service will be started before the web service
depends_on:
- api
# specify the build context for the web service
# this is the directory where the Dockerfile for the web service is located
build: ./frontend
# specify the ports to expose for the web service
# the first number is the port on the host machine
# the second number is the port inside the container
ports:
- 5173:5173
# specify the environment variables for the web service
# these environment variables will be available inside the container
environment:
VITE_API_URL: http://localhost:8000

# this is for docker compose watch mode
# anything mentioned under develop will be watched for changes by docker compose watch and it will perform the action mentioned
develop:
# we specify the files to watch for changes
watch:
# it'll watch for changes in package.json and package-lock.json and rebuild the container if there are any changes
- path: ./frontend/package.json
action: rebuild
- path: ./frontend/package-lock.json
action: rebuild
# it'll watch for changes in the frontend directory and sync the changes with the container real time
- path: ./frontend
target: /app
action: sync

# define the api service/container
api:
# api service depends on the db service so the db service will be started before the api service
depends_on:
- db

# specify the build context for the api service
build: ./backend

# specify the ports to expose for the api service
# the first number is the port on the host machine
# the second number is the port inside the container
ports:
- 8000:8000

# specify environment variables for the api service
# for demo purposes, we're using a local mongodb instance
environment:
DB_URL: mongodb://db/anime

# establish docker compose watch mode for the api service
develop:
# specify the files to watch for changes
watch:
# it'll watch for changes in package.json and package-lock.json and rebuild the container and image if there are any changes
- path: ./backend/package.json
action: rebuild
- path: ./backend/package-lock.json
action: rebuild

# it'll watch for changes in the backend directory and sync the changes with the container real time
- path: ./backend
target: /app
action: sync

# define the db service
db:
# specify the image to use for the db service from docker hub. If we have a custom image, we can specify that in this format
# In the above two services, we're using the build context to build the image for the service from the Dockerfile so we specify the image as "build: ./frontend" or "build: ./backend".
# but for the db service, we're using the image from docker hub so we specify the image as "image: mongo:latest"
# you can find the image name and tag for mongodb from docker hub here: https://hub.docker.com/_/mongo
image: mongo:latest

# specify the ports to expose for the db service
# generally, we do this in api service using mongodb atlas. But for demo purposes, we're using a local mongodb instance
# usually, mongodb runs on port 27017. So we're exposing the port 27017 on the host machine and mapping it to the port 27017 inside the container
ports:
- 27017:27017

# specify the volumes to mount for the db service
# we're mounting the volume named "anime" inside the container at /data/db directory
# this is done so that the data inside the mongodb container is persisted even if the container is stopped
volumes:
- anime:/data/db

# define the volumes to be used by the services
volumes:
anime:
```

next-docker/Dockerfile

```dockerfile
# inherit from a existing image to add the functionality
FROM node:20-alpine3.18

# RUN addgroup app && adduser -S -G app app
# USER app

# Set the working directory and assign ownership to the non-root user
WORKDIR /app

# Copy the package.json and package-lock.json files into the image.
COPY package*.json ./

# change ownership of the /app directory to the app user
# USER root

# change ownership of the /app directory to the app user
# chown -R :
# chown command changes the user and/or group ownership of for given file.
# RUN chown -R app:app .

# change the user back to the app user
# USER app

# Install the dependencies.
RUN npm install

# Copy the rest of the source files into the image.
COPY . .

# Expose the port that the application listens on.
EXPOSE 3000

# Run the application.
CMD npm run dev
```

next-docker/compose.yaml

```yaml
version: '3.8'

services:
frontend:
# uncomment the following line if you want to run a local instance of MongoDB
# depends_on:
# - db
build:
context: .
dockerfile: Dockerfile

# do port mapping so that we can access the app from the browser
ports:
- 3000:3000

# use docker compose to watch for changes and rebuild the container
develop:
watch:
- path: ./package.json
action: rebuild
- path: ./next.config.js
action: rebuild
- path: ./package-lock.json
action: rebuild
- path: .
target: /app
action: sync

# define the environment variables
environment:
# we're using MongoDB atlas so we need to pass in the connection string
DB_URL: mongodb+srv://sujata:[email protected]/

# we're using MongoDB atlas so we don't need to run a local instance of MongoDB
# but if you want to run a local instance, you can do it this way
# db:
# image: mongo
# ports:
# - 27017:27017
# environment:
# - MONGO_INITDB_ROOT_USERNAME=sujata
# - MONGO_INITDB_ROOT_PASSWORD=rnZzJjIDr3bIDymV
# volumes:
# - tasked:/data/db

volumes:
tasked:
```