Initial react client

16b30551 · Cross, Liam (UG - Comp Sci & Elec Eng) · 3742927f · 16b30551 · 16b30551 · 16b30551
Commit 16b30551 authored 1 year ago by Cross, Liam (UG - Comp Sci & Elec Eng)
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,6 @@
 **/.vs/
 **/obj/
 **/Migrations/
+
+client/node_modules
+client/dist
\ No newline at end of file
--- a/client/.eslintrc.cjs
+++ b/client/.eslintrc.cjs
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
--- a/client/Dockerfile
+++ b/client/Dockerfile
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package.json .
+
+RUN npm install
+
+COPY . .
+
+RUN npm run build
+
+EXPOSE 8080
+
+CMD [ "npm", "run", "preview" ]
\ No newline at end of file
--- a/client/README.md
+++ b/client/README.md
+# Airline Booking System client
+
+## How to develop the UI without docker
+
+Make sure you have node installed (e.g. version v20.11.0 which was used to create this).
+
+1. Install vite globally via `npm install -g vite`
+2. Navigate to the client directory
+3. Run `npm install`
+4. Run `npm run dev`
+5. Make changes
+6. Go to http://localhost:8080/ to see the changes
+
+## How to run the UI alone via docker
+
+Note: this does not run the microservices.
+Make sure you have docker installed.
+
+1. Navigate to the client directory
+2. Run `docker build . -t "airline-client"`
+3. Run `docker run -p 8080:8080 airline-client`
+4. Go to http://localhost:8080/ to view
\ No newline at end of file
--- a/client/favicon.ico
+++ b/client/favicon.ico
--- a/client/index.html
+++ b/client/index.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Airline Booking</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/client/package-lock.json
+++ b/client/package-lock.json
--- a/client/package.json
+++ b/client/package.json
+{
+  "name": "client",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview --host"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.56",
+    "@types/react-dom": "^18.2.19",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "typescript": "^5.2.2",
+    "vite": "^5.1.4"
+  }
+}
--- a/client/src/App.css
+++ b/client/src/App.css
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
+import './App.css';
+
+function App() {
+  return (
+    <>
+      Hello World
+    </>
+  );
+}
+
+export default App;
\ No newline at end of file
--- a/client/src/components/.gitkeep
+++ b/client/src/components/.gitkeep
--- a/client/src/index.css
+++ b/client/src/index.css
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
--- a/client/src/vite-env.d.ts
+++ b/client/src/vite-env.d.ts
+/// <reference types="vite/client" />
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/client/tsconfig.node.json
+++ b/client/tsconfig.node.json
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  preview: {
+    port: 8080,
+    strictPort: true
+  },
+  server: {
+    port: 8080,
+    strictPort: true
+  }
+})