Because - We want to test cirrus end to end This commit - Introduces demo app with frontend and server - Make command to build and run the demo app- `make build_demo_app` `make run_demo_app` - The frontend of the Demo App is accessible at [http://localhost:8080](http://localhost:8080) - The backend of the Demo App is accessible at [http://localhost:3002](http://localhost:3002) ps: FML and cirrus integration will come in different PR fixes #9243 fixes #9244
This commit is contained in:
Yashika Khurana
GitHub
Родитель
3ceb78923b
Коммит
636b828f17
8
Makefile
8
Makefile
|
|
@ -252,6 +252,14 @@ cirrus_typecheck_createstub: cirrus_build
|
|||
cirrus_generate_docs: cirrus_build
|
||||
$(COMPOSE) run cirrus sh -c '$(CIRRUS_GENERATE_DOCS)'
|
||||
|
||||
build_demo_app:
|
||||
$(COMPOSE) build demo-app-frontend demo-app-server
|
||||
|
||||
run_demo_app: build_demo_app
|
||||
$(COMPOSE) up demo-app-frontend demo-app-server
|
||||
|
||||
|
||||
|
||||
schemas_install:
|
||||
(cd schemas && poetry install)
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
# Demo App
|
||||
|
||||
This App is designed to test the Cirrus functionality end-to-end.
|
||||
|
||||
## Commands available to run the app
|
||||
|
||||
- To build the Demo App, including frontend and backend components, use the following command:
|
||||
`make build_demo_app`
|
||||
|
||||
- To run the Demo App, use the following command:
|
||||
`make run_demo_app`
|
||||
|
||||
## Frontend is available at
|
||||
|
||||
The frontend of the Demo App is accessible at: [http://localhost:8080](http://localhost:8080)
|
||||
|
||||
## Backend is available at
|
||||
|
||||
The backend of the Demo App is accessible at: [http://localhost:3002](http://localhost:3002)
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
FROM node:18 as build
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package*.json ./
|
||||
|
||||
RUN npm install
|
||||
|
||||
COPY . .
|
||||
|
||||
RUN npm run build
|
||||
|
||||
CMD ["npm", "start"]
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -0,0 +1,39 @@
|
|||
{
|
||||
"name": "frontend",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@testing-library/jest-dom": "^5.17.0",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"http-proxy-middleware": "^2.0.6",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
|
||||
function App() {
|
||||
const [message, setMessage] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/data')
|
||||
.then(response => response.json())
|
||||
.then(data => setMessage(data.message))
|
||||
.catch(error => console.error('Error fetching data:', error));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<h1>{message}</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
// src/setupProxy.js
|
||||
const { createProxyMiddleware } = require('http-proxy-middleware');
|
||||
|
||||
module.exports = function(app) {
|
||||
app.use(
|
||||
'/api',
|
||||
createProxyMiddleware({
|
||||
target: process.env.DEMO_APP_SERVER??'http://localhost:3002',
|
||||
changeOrigin: true,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
FROM node:18
|
||||
|
||||
WORKDIR /usr/src/app
|
||||
|
||||
COPY package*.json ./
|
||||
COPY index.js ./
|
||||
|
||||
EXPOSE 3001
|
||||
|
||||
CMD ["node", "index.js"]
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
const http = require('http');
|
||||
|
||||
const server = http.createServer((req, res) => {
|
||||
|
||||
|
||||
if (req.url === '/api/data' && req.method === 'GET') {
|
||||
res.setHeader('Content-Type', 'application/json');
|
||||
const jsonResponse = JSON.stringify({ message: 'Hello from the server!' });
|
||||
console.log('Server Response:', jsonResponse);
|
||||
res.end(jsonResponse);
|
||||
} else {
|
||||
res.statusCode = 404;
|
||||
res.end('Not Found');
|
||||
}
|
||||
});
|
||||
|
||||
const PORT = 3002;
|
||||
server.listen(PORT, () => {
|
||||
console.log(`Server is running on port ${PORT}`);
|
||||
});
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"name": "server",
|
||||
"version": "1.0.0"
|
||||
}
|
||||
|
|
@ -38,3 +38,23 @@ services:
|
|||
build: experimenter/tests/integration/nimbus/utils/ping_server
|
||||
ports:
|
||||
- "5000:5000"
|
||||
|
||||
demo-app-server:
|
||||
build:
|
||||
context: ./demo-app/server
|
||||
dockerfile: Dockerfile
|
||||
ports:
|
||||
- '3002:3002'
|
||||
restart: always
|
||||
|
||||
demo-app-frontend:
|
||||
build:
|
||||
context: ./demo-app/frontend
|
||||
dockerfile: Dockerfile
|
||||
ports:
|
||||
- '8080:3000'
|
||||
restart: always
|
||||
links:
|
||||
- demo-app-server
|
||||
environment:
|
||||
- DEMO_APP_SERVER=http://demo-app-server:3002
|
||||
|
|
|
|||
|
|
@ -24,4 +24,4 @@ services:
|
|||
build:
|
||||
context: cirrus/server/
|
||||
dockerfile: Dockerfile
|
||||
working_dir: /cirrus
|
||||
working_dir: /cirrus
|
||||
|
|
@ -122,6 +122,26 @@ services:
|
|||
working_dir: /cirrus
|
||||
ports:
|
||||
- "8001:8001"
|
||||
demo-app-server:
|
||||
build:
|
||||
context: ./demo-app/server
|
||||
dockerfile: Dockerfile
|
||||
ports:
|
||||
- '3002:3002'
|
||||
restart: always
|
||||
|
||||
demo-app-frontend:
|
||||
build:
|
||||
context: ./demo-app/frontend
|
||||
dockerfile: Dockerfile
|
||||
ports:
|
||||
- '8080:3000'
|
||||
restart: always
|
||||
links:
|
||||
- demo-app-server
|
||||
environment:
|
||||
- DEMO_APP_SERVER=http://demo-app-server:3002
|
||||
|
||||
|
||||
volumes:
|
||||
db_volume:
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче