Hugging Face's logo

Spaces:
hoduy99
/
react-test
Sleeping

App Files Community
hoduy99 commited on
Commit
d761868
·
1 Parent(s): 962ece6

adding react - likely not work

Browse files
Files changed (9) hide show
  1. .babelrc +3 -0
  2. Dockerfile +32 -0
  3. package.json +24 -0
  4. public/index.html +11 -0
  5. requirements.txt +2 -1
  6. server.js +16 -0
  7. src/App.js +11 -0
  8. src/index.js +10 -0
  9. webpack.config.js +36 -0
.babelrc ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ {
2
+ "presets": ["@babel/preset-env", "@babel/preset-react"]
3
+ }
Dockerfile CHANGED
@@ -1,16 +1,48 @@
1
  # Read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
2
  # you will also find guides on how best to write your Dockerfile
3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  FROM python:3.9
5
 
 
6
  RUN useradd -m -u 1000 user
7
  USER user
8
  ENV PATH="/home/user/.local/bin:$PATH"
9
 
 
10
  WORKDIR /app
11
 
 
 
 
 
12
  COPY --chown=user ./requirements.txt requirements.txt
13
  RUN pip install --no-cache-dir --upgrade -r requirements.txt
14
 
 
15
  COPY --chown=user . /app
 
 
 
 
 
16
  CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]
 
 
1
  # Read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
2
  # you will also find guides on how best to write your Dockerfile
3
 
4
+ # Use an official Node runtime as a parent image
5
+ FROM node:16 as node-builder
6
+
7
+ # Set the working directory in the container
8
+ WORKDIR /app
9
+
10
+ # Copy package.json and package-lock.json
11
+ COPY package*.json ./
12
+
13
+ # Install dependencies
14
+ RUN npm install
15
+
16
+ # Copy the rest of the application code
17
+ COPY . .
18
+
19
+ # Build the React app
20
+ RUN npm run build
21
+
22
+ # Use an official Python runtime as a parent image
23
  FROM python:3.9
24
 
25
+ # Create a new user
26
  RUN useradd -m -u 1000 user
27
  USER user
28
  ENV PATH="/home/user/.local/bin:$PATH"
29
 
30
+ # Set the working directory in the container
31
  WORKDIR /app
32
 
33
+ # Copy the built React app from the node-builder stage
34
+ COPY --from=node-builder /app/build /app/build
35
+
36
+ # Copy requirements.txt and install Python dependencies
37
  COPY --chown=user ./requirements.txt requirements.txt
38
  RUN pip install --no-cache-dir --upgrade -r requirements.txt
39
 
40
+ # Copy the rest of the application code
41
  COPY --chown=user . /app
42
+
43
+ # Expose the port the app runs on
44
+ EXPOSE 7860
45
+
46
+ # Command to run the application
47
  CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]
48
+
package.json ADDED
@@ -0,0 +1,24 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "name": "my-react-app",
3
+ "version": "1.0.0",
4
+ "scripts": {
5
+ "start": "node server.js",
6
+ "build": "webpack --mode production"
7
+ },
8
+ "dependencies": {
9
+ "express": "^4.17.1",
10
+ "react": "^17.0.2",
11
+ "react-dom": "^17.0.2"
12
+ },
13
+ "devDependencies": {
14
+ "@babel/core": "^7.14.3",
15
+ "@babel/preset-env": "^7.14.2",
16
+ "@babel/preset-react": "^7.13.13",
17
+ "babel-loader": "^8.2.2",
18
+ "css-loader": "^5.2.6",
19
+ "html-webpack-plugin": "^5.3.1",
20
+ "style-loader": "^2.0.0",
21
+ "webpack": "^5.38.1",
22
+ "webpack-cli": "^4.7.0"
23
+ }
24
+ }
public/index.html ADDED
@@ -0,0 +1,11 @@
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>React App</title>
7
+ </head>
8
+ <body>
9
+ <div id="root"></div>
10
+ </body>
11
+ </html>
requirements.txt CHANGED
@@ -1,2 +1,3 @@
1
  fastapi
2
- uvicorn[standard]
 
 
1
  fastapi
2
+ uvicorn[standard]
3
+ requests
server.js ADDED
@@ -0,0 +1,16 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ const express = require('express');
2
+ const path = require('path');
3
+ const app = express();
4
+
5
+ // Serve static files from the React app build directory
6
+ app.use(express.static(path.join(__dirname, 'dist')));
7
+
8
+ // Handles any requests that don't match the ones above
9
+ app.get('*', (req, res) =>{
10
+ res.sendFile(path.join(__dirname, 'dist', 'index.html'));
11
+ });
12
+
13
+ const port = process.env.PORT || 7860;
14
+ app.listen(port, () => {
15
+ console.log(`Server is running on port ${port}`);
16
+ });
src/App.js ADDED
@@ -0,0 +1,11 @@
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import React from 'react';
2
+
3
+ function App() {
4
+ return (
5
+ <div>
6
+ <h1>Hello, React on Hugging Face with Docker!</h1>
7
+ </div>
8
+ );
9
+ }
10
+
11
+ export default App;
src/index.js ADDED
@@ -0,0 +1,10 @@
 
 
 
 
 
 
 
 
 
 
 
1
+ import React from 'react';
2
+ import ReactDOM from 'react-dom';
3
+ import App from './App';
4
+
5
+ ReactDOM.render(
6
+ <React.StrictMode>
7
+ <App />
8
+ </React.StrictMode>,
9
+ document.getElementById('root')
10
+ );
webpack.config.js ADDED
@@ -0,0 +1,36 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ const path = require('path');
2
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
3
+
4
+ module.exports = {
5
+ entry: './src/index.js',
6
+ output: {
7
+ path: path.resolve(__dirname, 'dist'),
8
+ filename: 'bundle.js',
9
+ },
10
+ module: {
11
+ rules: [
12
+ {
13
+ test: /\.(js|jsx)$/,
14
+ exclude: /node_modules/,
15
+ use: {
16
+ loader: 'babel-loader',
17
+ options: {
18
+ presets: ['@babel/preset-env', '@babel/preset-react']
19
+ }
20
+ },
21
+ },
22
+ {
23
+ test: /\.css$/,
24
+ use: ['style-loader', 'css-loader'],
25
+ },
26
+ ],
27
+ },
28
+ plugins: [
29
+ new HtmlWebpackPlugin({
30
+ template: './public/index.html',
31
+ }),
32
+ ],
33
+ resolve: {
34
+ extensions: ['.js', '.jsx'],
35
+ },
36
+ };