feat: initial commit
This commit is contained in:
commit
98355eceb5
18 changed files with 5416 additions and 0 deletions
4
.dockerignore
Normal file
4
.dockerignore
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.react-router
|
||||
build
|
||||
node_modules
|
||||
README.md
|
||||
8
.gitignore
vendored
Normal file
8
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
.DS_Store
|
||||
.env
|
||||
/node_modules/
|
||||
|
||||
# React Router
|
||||
/.react-router/
|
||||
/build/
|
||||
/.idea
|
||||
22
Dockerfile
Normal file
22
Dockerfile
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
FROM node:20-alpine AS development-dependencies-env
|
||||
COPY . /app
|
||||
WORKDIR /app
|
||||
RUN npm ci
|
||||
|
||||
FROM node:20-alpine AS production-dependencies-env
|
||||
COPY ./package.json package-lock.json /app/
|
||||
WORKDIR /app
|
||||
RUN npm ci --omit=dev
|
||||
|
||||
FROM node:20-alpine AS build-env
|
||||
COPY . /app/
|
||||
COPY --from=development-dependencies-env /app/node_modules /app/node_modules
|
||||
WORKDIR /app
|
||||
RUN npm run build
|
||||
|
||||
FROM node:20-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"]
|
||||
87
README.md
Normal file
87
README.md
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
# Welcome to React Router!
|
||||
|
||||
A modern, production-ready template for building full-stack React applications using React Router.
|
||||
|
||||
[](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default)
|
||||
|
||||
## 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.
|
||||
19
app/app.css
Normal file
19
app/app.css
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: large;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 48px;
|
||||
padding: 5px 10px 5px 5px;
|
||||
}
|
||||
}
|
||||
77
app/root.tsx
Normal file
77
app/root.tsx
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
import {
|
||||
isRouteErrorResponse,
|
||||
Links,
|
||||
Meta,
|
||||
Outlet,
|
||||
Scripts,
|
||||
ScrollRestoration,
|
||||
} from "react-router";
|
||||
|
||||
import { ConfigProvider } from 'antd';
|
||||
|
||||
import type { Route } from "./+types/root";
|
||||
import "./app.css";
|
||||
|
||||
export function Layout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<Meta />
|
||||
<Links />
|
||||
</head>
|
||||
<body>
|
||||
{children}
|
||||
<ScrollRestoration />
|
||||
<Scripts />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
return <ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
// Seed Token
|
||||
colorPrimary: "#00b353",
|
||||
borderRadius: 2,
|
||||
|
||||
// Alias Token
|
||||
// colorBgContainer: '#f6ffed',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Outlet />
|
||||
</ConfigProvider>
|
||||
}
|
||||
|
||||
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
|
||||
let message = "Oops!";
|
||||
let details = "An unexpected error occurred.";
|
||||
let stack: string | undefined;
|
||||
|
||||
if (isRouteErrorResponse(error)) {
|
||||
message = error.status === 404 ? "404" : "Error";
|
||||
details =
|
||||
error.status === 404
|
||||
? "The requested page could not be found."
|
||||
: error.statusText || details;
|
||||
} else if (import.meta.env.DEV && error && error instanceof Error) {
|
||||
details = error.message;
|
||||
stack = error.stack;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1>{message}</h1>
|
||||
<p>{details}</p>
|
||||
{stack && (
|
||||
<pre className="w-full p-4 overflow-x-auto">
|
||||
<code>{stack}</code>
|
||||
</pre>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
12
app/routes.ts
Normal file
12
app/routes.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import {type RouteConfig, index, layout, route} from "@react-router/dev/routes";
|
||||
|
||||
export default [
|
||||
layout("routes/base_layout.tsx",
|
||||
[
|
||||
index("routes/home.tsx"),
|
||||
route("proxy", "routes/proxy.tsx", [
|
||||
index("routes/proxy/overview.tsx"),
|
||||
route("origins", "routes/proxy/origins.tsx"),
|
||||
])
|
||||
]),
|
||||
] satisfies RouteConfig;
|
||||
74
app/routes/base_layout.tsx
Normal file
74
app/routes/base_layout.tsx
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
import React from 'react';
|
||||
import {CloudServerOutlined, DashboardOutlined, GlobalOutlined, HomeOutlined} from '@ant-design/icons';
|
||||
import {Layout, Menu} from 'antd';
|
||||
import {Outlet, useNavigate} from "react-router";
|
||||
|
||||
|
||||
const {Content, Footer, Sider} = Layout;
|
||||
|
||||
const items = [{
|
||||
key: "home", icon: React.createElement(HomeOutlined), label: "Home", "data-navigate": "/",
|
||||
}, {
|
||||
key: "proxy", icon: React.createElement(CloudServerOutlined), label: "Smart Proxy", children: [{
|
||||
key: "proxy/overview",
|
||||
icon: React.createElement(DashboardOutlined),
|
||||
label: "Overview",
|
||||
"data-navigate": "/proxy",
|
||||
}, {
|
||||
key: "proxy/origins",
|
||||
icon: React.createElement(GlobalOutlined),
|
||||
label: "Web Origins",
|
||||
"data-navigate": "/proxy/origins",
|
||||
}]
|
||||
}];
|
||||
|
||||
export default function BaseLayout() {
|
||||
const navigate = useNavigate();
|
||||
// @ts-ignore TODO
|
||||
const addOnClick = (items) => {
|
||||
// @ts-ignore TODO
|
||||
return items.map((item) => {
|
||||
return item ? {
|
||||
...item,
|
||||
children: item.children ? addOnClick(item.children) : null,
|
||||
onClick: item["data-navigate"] ? () => {
|
||||
navigate(item["data-navigate"]);
|
||||
} : undefined
|
||||
} : null;
|
||||
})
|
||||
};
|
||||
const menuItems = addOnClick(items);
|
||||
return (<Layout>
|
||||
<Sider
|
||||
breakpoint="lg"
|
||||
collapsedWidth="0"
|
||||
onBreakpoint={(broken) => {
|
||||
console.log(broken);
|
||||
}}
|
||||
onCollapse={(collapsed, type) => {
|
||||
console.log(collapsed, type);
|
||||
}}
|
||||
style={{height: "100vh"}}
|
||||
>
|
||||
<h1 className="logo" onClick={() => navigate("/")}>
|
||||
<img src="https://jasima.app/img/logo.png" alt=""/>
|
||||
jasima.app
|
||||
</h1>
|
||||
<Menu theme="dark" mode="inline" defaultSelectedKeys={['a']} items={menuItems}/>
|
||||
</Sider>
|
||||
<Layout>
|
||||
<Content style={{margin: '24px 16px 0'}}>
|
||||
<div
|
||||
style={{
|
||||
padding: 24, minHeight: 360, background: "white",
|
||||
}}
|
||||
>
|
||||
<Outlet/>
|
||||
</div>
|
||||
</Content>
|
||||
<Footer style={{textAlign: 'center'}}>
|
||||
Copyright © 2021-{new Date().getFullYear()} SR2 Communications Limited.
|
||||
</Footer>
|
||||
</Layout>
|
||||
</Layout>)
|
||||
}
|
||||
7
app/routes/home.tsx
Normal file
7
app/routes/home.tsx
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import {Typography} from "antd";
|
||||
|
||||
const {Paragraph} = Typography;
|
||||
|
||||
export default function Home() {
|
||||
return <Paragraph>hi</Paragraph>;
|
||||
}
|
||||
21
app/routes/proxy.tsx
Normal file
21
app/routes/proxy.tsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import type { Route } from "../+types/root";
|
||||
import {CloudServerOutlined} from "@ant-design/icons";
|
||||
import {Breadcrumb, Typography} from "antd";
|
||||
import {Outlet} from "react-router";
|
||||
|
||||
const { Title } = Typography;
|
||||
|
||||
export function meta({}: Route.MetaArgs) {
|
||||
return [
|
||||
{ title: "Smart Proxy Administration" },
|
||||
{ name: "description", content: "Hi!" },
|
||||
];
|
||||
}
|
||||
|
||||
export default function Proxy() {
|
||||
return <>
|
||||
<Title><CloudServerOutlined /> Smart Proxy</Title>
|
||||
<Breadcrumb items={[{title: "Smart Proxy", href: "/proxy"}]} />
|
||||
<Outlet />
|
||||
</>;
|
||||
}
|
||||
4
app/routes/proxy/origins.tsx
Normal file
4
app/routes/proxy/origins.tsx
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
|
||||
export default function Origins() {
|
||||
return "hello origins";
|
||||
}
|
||||
7
app/routes/proxy/overview.tsx
Normal file
7
app/routes/proxy/overview.tsx
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import {Typography} from "antd";
|
||||
|
||||
const {Paragraph} = Typography;
|
||||
|
||||
export default function Overview() {
|
||||
return <Paragraph>hi</Paragraph>;
|
||||
}
|
||||
5000
package-lock.json
generated
Normal file
5000
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
32
package.json
Normal file
32
package.json
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
{
|
||||
"name": "frontend",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "react-router build",
|
||||
"dev": "react-router dev",
|
||||
"start": "react-router-serve ./build/server/index.js",
|
||||
"typecheck": "react-router typegen && tsc"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^6.1.0",
|
||||
"@react-router/node": "7.10.1",
|
||||
"@react-router/serve": "7.10.1",
|
||||
"antd": "^6.1.4",
|
||||
"isbot": "^5.1.31",
|
||||
"react": "^19.2.3",
|
||||
"react-dom": "^19.2.3",
|
||||
"react-router": "7.10.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@react-router/dev": "7.10.1",
|
||||
"@tailwindcss/vite": "^4.1.13",
|
||||
"@types/node": "^22",
|
||||
"@types/react": "^19.2.7",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"tailwindcss": "^4.1.13",
|
||||
"typescript": "^5.9.2",
|
||||
"vite": "^7.1.7",
|
||||
"vite-tsconfig-paths": "^5.1.4"
|
||||
}
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
7
react-router.config.ts
Normal file
7
react-router.config.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import type { Config } from "@react-router/dev/config";
|
||||
|
||||
export default {
|
||||
// Config options...
|
||||
// Server-side render by default, to enable SPA mode set this to `false`
|
||||
ssr: false,
|
||||
} satisfies Config;
|
||||
27
tsconfig.json
Normal file
27
tsconfig.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"include": [
|
||||
"**/*",
|
||||
"**/.server/**/*",
|
||||
"**/.client/**/*",
|
||||
".react-router/types/**/*"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"lib": ["DOM", "DOM.Iterable", "ES2022"],
|
||||
"types": ["node", "vite/client"],
|
||||
"target": "ES2022",
|
||||
"module": "ES2022",
|
||||
"moduleResolution": "bundler",
|
||||
"jsx": "react-jsx",
|
||||
"rootDirs": [".", "./.react-router/types"],
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"~/*": ["./app/*"]
|
||||
},
|
||||
"esModuleInterop": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"noEmit": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true
|
||||
}
|
||||
}
|
||||
8
vite.config.ts
Normal file
8
vite.config.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import { reactRouter } from "@react-router/dev/vite";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
import { defineConfig } from "vite";
|
||||
import tsconfigPaths from "vite-tsconfig-paths";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue