Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Resolved Issue #255: Dockerized Application for Improved Deployment #262

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions .dockerignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
# Include any files or directories that you don't want to be copied to your
# container here (e.g., local build artifacts, temporary files, etc.).
#
# For more help, visit the .dockerignore file reference guide at
# https://docs.docker.com/go/build-context-dockerignore/

**/.classpath
**/.dockerignore
**/.env
**/.git
**/.gitignore
**/.project
**/.settings
**/.toolstarget
**/.vs
**/.vscode
**/.next
**/.cache
**/*.*proj.user
**/*.dbmdl
**/*.jfm
**/charts
**/docker-compose*
**/compose.y*ml
**/Dockerfile*
**/node_modules
**/npm-debug.log
**/obj
**/secrets.dev.yaml
**/values.dev.yaml
**/build
**/dist
LICENSE
README.md
25 changes: 25 additions & 0 deletions Dockerfile
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
# Build stage
FROM node:20.11.0-alpine AS build

WORKDIR /app

# Install dependencies
COPY package.json package-lock.json ./
RUN npm ci

# Copy the rest of the files and build the project
COPY . .
RUN npm run build

# Production stage
FROM nginx:stable-alpine

# Copy built assets from the build stage
COPY --from=build /app/dist /usr/share/nginx/html

# Copy nginx configuration file if needed
# COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]
22 changes: 22 additions & 0 deletions README.Docker.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
### Building and running your application

When you're ready, start your application by running:
`docker compose up --build`.

Your application will be available at http://localhost:5000.

### Deploying your application to the cloud

First, build your image, e.g.: `docker build -t myapp .`.
If your cloud uses a different CPU architecture than your development
machine (e.g., you are on a Mac M1 and your cloud provider is amd64),
you'll want to build the image for that platform, e.g.:
`docker build --platform=linux/amd64 -t myapp .`.

Then, push it to your registry, e.g. `docker push myregistry.com/myapp`.

Consult Docker's [getting started](https://docs.docker.com/go/get-started-sharing/)
docs for more detail on building and pushing.

### References
* [Docker's Node.js guide](https://docs.docker.com/language/nodejs/)
4 changes: 4 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,11 @@ Follow these steps to set up the project locally:
```bash
npm run dev
```
### Docker run

```
docker compose up --build
```
## Contributing Guidelines

Before diving into the learning resources, please familiarize yourself with the following contributing guidelines:
Expand Down
9 changes: 9 additions & 0 deletions compose.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
version: '3.8'

services:
web:
build:
context: .
dockerfile: Dockerfile
ports:
- "80:80" # Nginx serving on port 80
176 changes: 176 additions & 0 deletions dist/assets/index-Zg1fuqc5.js

Large diffs are not rendered by default.

102 changes: 82 additions & 20 deletions dist/index.html
Original file line number Diff line number Diff line change
@@ -1,20 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Poppins:wght@100;300&family=Roboto&family=Roboto+Slab:wght@500&display=swap"
rel="stylesheet"
/>
<title>shopy</title>
<script type="module" crossorigin src="/assets/index-pXWPBzfy.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-ZnNZpM0-.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Poppins:wght@100;300&family=Roboto&family=Roboto+Slab:wght@500&display=swap"
rel="stylesheet"
/>
<title>shopy</title>
<style>
/* Add your preloader CSS here */
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden; /* Prevent scrolling while loading */
}
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffffff; /* Background color of the preloader */
display: flex;
justify-content: center;
align-items: center;
z-index: 9999; /* Ensure the preloader is above all other content */
}
.spinner {
width: 50px;
height: 50px;
border: 8px solid #f3f3f3; /* Light grey */
border-top: 8px solid #3498db; /* Blue */
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Poppins:wght@100;300&family=Roboto&family=Roboto+Slab:wght@500&display=swap"
rel="stylesheet"

/>
<title>shopy</title>
<script type="module" crossorigin src="/assets/index-Zg1fuqc5.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Dj2grr-7.css">
</head>
<body>
<div id="preloader">
<div class="spinner"></div>
</div>
<div id="root" style="display: none;"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Simulate a delay for demo purposes (e.g., fetching data)
setTimeout(function() {
// Hide the preloader
document.getElementById("preloader").style.display = "none";
// Show the main content
document.getElementById("root").style.display = "block";
// Allow scrolling
document.body.style.overflow = "auto";
}, 2000); // Adjust the delay time as needed
});
</script>
<div id="root"></div>
</body>
</html>
Expand Down
2 changes: 1 addition & 1 deletion dist/vite.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading