This commit is contained in:
@@ -0,0 +1,36 @@
|
||||
name: CI
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
pull_request:
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
|
||||
jobs:
|
||||
validate:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Check out repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 24
|
||||
|
||||
- name: Enable pnpm through Corepack
|
||||
run: corepack enable
|
||||
|
||||
- name: Install dependencies
|
||||
run: pnpm install --frozen-lockfile
|
||||
|
||||
- name: Typecheck
|
||||
run: pnpm typecheck
|
||||
|
||||
- name: Build application
|
||||
run: pnpm build
|
||||
|
||||
- name: Build Docker image
|
||||
run: docker build --tag porto:ci .
|
||||
+22
-18
@@ -1,22 +1,26 @@
|
||||
FROM node:24-alpine AS development-dependencies-env
|
||||
COPY . /app
|
||||
FROM node:24-alpine AS base
|
||||
ENV PNPM_HOME="/pnpm"
|
||||
ENV PATH="$PNPM_HOME:$PATH"
|
||||
RUN corepack enable && corepack install --global pnpm@11.12.0
|
||||
WORKDIR /app
|
||||
RUN npm ci
|
||||
|
||||
FROM node:24-alpine AS production-dependencies-env
|
||||
COPY ./package.json package-lock.json /app/
|
||||
WORKDIR /app
|
||||
RUN npm ci --omit=dev
|
||||
FROM base AS development-dependencies-env
|
||||
COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
|
||||
RUN pnpm install --frozen-lockfile
|
||||
|
||||
FROM node:24-alpine AS build-env
|
||||
COPY . /app/
|
||||
COPY --from=development-dependencies-env /app/node_modules /app/node_modules
|
||||
WORKDIR /app
|
||||
RUN npm run build
|
||||
FROM base AS production-dependencies-env
|
||||
COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
|
||||
RUN pnpm install --prod --frozen-lockfile
|
||||
|
||||
FROM node:24-alpine
|
||||
COPY ./package.json package-lock.json /app/
|
||||
COPY --from=production-dependencies-env /app/node_modules /app/node_modules
|
||||
COPY --from=build-env /app/build /app/build
|
||||
WORKDIR /app
|
||||
CMD ["npm", "run", "start"]
|
||||
FROM base AS build-env
|
||||
COPY . ./
|
||||
COPY --from=development-dependencies-env /app/node_modules ./node_modules
|
||||
RUN pnpm build
|
||||
|
||||
FROM base AS production
|
||||
ENV NODE_ENV="production"
|
||||
COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
|
||||
COPY --from=production-dependencies-env /app/node_modules ./node_modules
|
||||
COPY --from=build-env /app/build ./build
|
||||
EXPOSE 3000
|
||||
CMD ["pnpm", "start"]
|
||||
|
||||
@@ -1,87 +1,7 @@
|
||||
# Welcome to React Router!
|
||||
NGAPAIN LU LIAT LIAT README GUA????
|
||||
|
||||
A modern, production-ready template for building full-stack React applications using React Router.
|
||||
SUKA LU AMA GUA???
|
||||
|
||||
[](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default)
|
||||
GAY BANGET MAS.
|
||||
|
||||
## Features
|
||||
|
||||
- 🚀 Server-side rendering
|
||||
- ⚡️ Hot Module Replacement (HMR)
|
||||
- 📦 Asset bundling and optimization
|
||||
- 🔄 Data loading and mutations
|
||||
- 🔒 TypeScript by default
|
||||
- 🎉 TailwindCSS for styling
|
||||
- 📖 [React Router docs](https://reactrouter.com/)
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Installation
|
||||
|
||||
Install the dependencies:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
### Development
|
||||
|
||||
Start the development server with HMR:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Your application will be available at `http://localhost:5173`.
|
||||
|
||||
## Building for Production
|
||||
|
||||
Create a production build:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
## Deployment
|
||||
|
||||
### Docker Deployment
|
||||
|
||||
To build and run using Docker:
|
||||
|
||||
```bash
|
||||
docker build -t my-app .
|
||||
|
||||
# Run the container
|
||||
docker run -p 3000:3000 my-app
|
||||
```
|
||||
|
||||
The containerized application can be deployed to any platform that supports Docker, including:
|
||||
|
||||
- AWS ECS
|
||||
- Google Cloud Run
|
||||
- Azure Container Apps
|
||||
- Digital Ocean App Platform
|
||||
- Fly.io
|
||||
- Railway
|
||||
|
||||
### DIY Deployment
|
||||
|
||||
If you're familiar with deploying Node applications, the built-in app server is production-ready.
|
||||
|
||||
Make sure to deploy the output of `npm run build`
|
||||
|
||||
```
|
||||
├── package.json
|
||||
├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
|
||||
├── build/
|
||||
│ ├── client/ # Static assets
|
||||
│ └── server/ # Server-side code
|
||||
```
|
||||
|
||||
## Styling
|
||||
|
||||
This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
|
||||
|
||||
---
|
||||
|
||||
Built with ❤️ using React Router.
|
||||

|
||||
|
||||
+69
-6
@@ -2,15 +2,78 @@
|
||||
@import "tw-animate-css";
|
||||
|
||||
@theme {
|
||||
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--font-display: "Anton", ui-sans-serif, sans-serif;
|
||||
--font-body: "Source Serif 4", ui-serif, Georgia, serif;
|
||||
--font-terminal: "Courier Prime", ui-monospace, monospace;
|
||||
|
||||
--color-paper: #fef8f4;
|
||||
--color-paper-low: #f8f3ef;
|
||||
--color-panel: #f2ede9;
|
||||
--color-panel-high: #e4dcd6;
|
||||
--color-ink: #1d1b19;
|
||||
--color-muted: #5b4137;
|
||||
--color-outline: #bfb8ac;
|
||||
--color-orange: #ff5c01;
|
||||
--color-orange-dark: #a73a00;
|
||||
--color-cyan: #abece3;
|
||||
--color-cyan-dark: #266862;
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
background: var(--color-paper);
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
@apply bg-white dark:bg-gray-950;
|
||||
min-width: 320px;
|
||||
margin: 0;
|
||||
background: var(--color-paper);
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color-scheme: dark;
|
||||
::selection {
|
||||
background: var(--color-cyan);
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.scanlines {
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
transparent 50%,
|
||||
rgb(0 0 0 / 0.02) 50%,
|
||||
rgb(0 0 0 / 0.02)
|
||||
);
|
||||
background-size: 100% 4px;
|
||||
}
|
||||
|
||||
.terminal-cursor {
|
||||
animation: terminal-blink 1s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes terminal-blink {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
.terminal-cursor {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -19,7 +19,7 @@ export const links: Route.LinksFunction = () => [
|
||||
},
|
||||
{
|
||||
rel: "stylesheet",
|
||||
href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
|
||||
href: "https://fonts.googleapis.com/css2?family=Anton&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
+695
-487
File diff suppressed because it is too large
Load Diff
Generated
-4211
File diff suppressed because it is too large
Load Diff
@@ -2,6 +2,7 @@
|
||||
"name": "porto",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"packageManager": "pnpm@11.12.0",
|
||||
"scripts": {
|
||||
"build": "react-router build",
|
||||
"dev": "react-router dev",
|
||||
|
||||
Generated
+2611
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,2 @@
|
||||
allowBuilds:
|
||||
esbuild: false
|
||||
Reference in New Issue
Block a user