mirror of
https://github.com/RoboSats/robosats.git
synced 2025-01-18 12:11:35 +00:00
Build frontend app test page using React
This commit is contained in:
Reckless_Satoshi
parent
44ddaef23b
commit
e83f0295a5
14
frontend/babel.config.json
Normal file
14
frontend/babel.config.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"presets": [
|
||||
[
|
||||
"@babel/preset-env",
|
||||
{
|
||||
"targets": {
|
||||
"node": "10"
|
||||
}
|
||||
}
|
||||
],
|
||||
"@babel/preset-react"
|
||||
],
|
||||
"plugins": ["@babel/plugin-proposal-class-properties"]
|
||||
}
|
||||
2988
frontend/package-lock.json
generated
Normal file
2988
frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
29
frontend/package.json
Normal file
29
frontend/package.json
Normal file
@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"dev": "webpack --mode development --watch",
|
||||
"build": "webpack --mode production"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.16.7",
|
||||
"@babel/preset-env": "^7.16.7",
|
||||
"@babel/preset-react": "^7.16.7",
|
||||
"babel-loader": "^8.2.3",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"webpack": "^5.65.0",
|
||||
"webpack-cli": "^4.9.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-proposal-class-properties": "^7.16.7",
|
||||
"@material-ui/core": "^4.12.3",
|
||||
"@material-ui/icons": "^4.11.2",
|
||||
"react-router-dom": "^5.2.0"
|
||||
}
|
||||
}
|
||||
15
frontend/src/components/App.js
Normal file
15
frontend/src/components/App.js
Normal file
@ -0,0 +1,15 @@
|
||||
import React, { Component } from "react";
|
||||
import { render } from "react-dom";
|
||||
|
||||
export default class App extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return <h1>React Test</h1>;
|
||||
}
|
||||
}
|
||||
|
||||
const appDiv = document.getElementById("app");
|
||||
render(<App />, appDiv);
|
||||
1
frontend/src/index.js
Normal file
1
frontend/src/index.js
Normal file
@ -0,0 +1 @@
|
||||
import App from "./components/App";
|
||||
20
frontend/static/css/index.css
Normal file
20
frontend/static/css/index.css
Normal file
@ -0,0 +1,20 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#main {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
2
frontend/static/frontend/main.js
Normal file
2
frontend/static/frontend/main.js
Normal file
File diff suppressed because one or more lines are too long
35
frontend/static/frontend/main.js.LICENSE.txt
Normal file
35
frontend/static/frontend/main.js.LICENSE.txt
Normal file
@ -0,0 +1,35 @@
|
||||
/*!**********************!*\
|
||||
!*** ./src/index.js ***!
|
||||
\**********************/
|
||||
|
||||
/*!*******************************!*\
|
||||
!*** ./src/components/App.js ***!
|
||||
\*******************************/
|
||||
|
||||
/*!*************************************!*\
|
||||
!*** ./node_modules/react/index.js ***!
|
||||
\*************************************/
|
||||
|
||||
/*!*****************************************!*\
|
||||
!*** ./node_modules/react-dom/index.js ***!
|
||||
\*****************************************/
|
||||
|
||||
/*!*****************************************!*\
|
||||
!*** ./node_modules/scheduler/index.js ***!
|
||||
\*****************************************/
|
||||
|
||||
/*!*********************************************!*\
|
||||
!*** ./node_modules/object-assign/index.js ***!
|
||||
\*********************************************/
|
||||
|
||||
/*!********************************************************!*\
|
||||
!*** ./node_modules/react/cjs/react.production.min.js ***!
|
||||
\********************************************************/
|
||||
|
||||
/*!****************************************************************!*\
|
||||
!*** ./node_modules/react-dom/cjs/react-dom.production.min.js ***!
|
||||
\****************************************************************/
|
||||
|
||||
/*!****************************************************************!*\
|
||||
!*** ./node_modules/scheduler/cjs/scheduler.production.min.js ***!
|
||||
\****************************************************************/
|
||||
23
frontend/templates/frontend/index.html
Normal file
23
frontend/templates/frontend/index.html
Normal file
@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Robosats</title>
|
||||
{% load static %}
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
|
||||
/>
|
||||
<link rel="stylesheet" type="text/css" href="{% static "css/index.css" %}"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="main">
|
||||
<div id="app"></div>
|
||||
</div>
|
||||
|
||||
<script src="{% static "frontend/main.js" %}"></script>
|
||||
</body>
|
||||
</html>
|
||||
6
frontend/urls.py
Normal file
6
frontend/urls.py
Normal file
@ -0,0 +1,6 @@
|
||||
from django.urls import path
|
||||
from .views import index
|
||||
|
||||
urlpatterns = [
|
||||
path('', index),
|
||||
]
|
||||
@ -1,3 +1,6 @@
|
||||
from django.shortcuts import render
|
||||
|
||||
# Create your views here.
|
||||
|
||||
def index(request, *args, **kwargs):
|
||||
return render(request, 'frontend/index.html')
|
||||
32
frontend/webpack.config.js
Normal file
32
frontend/webpack.config.js
Normal file
@ -0,0 +1,32 @@
|
||||
const path = require("path");
|
||||
const webpack = require("webpack");
|
||||
|
||||
module.exports = {
|
||||
entry: "./src/index.js",
|
||||
output: {
|
||||
path: path.resolve(__dirname, "./static/frontend"),
|
||||
filename: "[name].js",
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: "babel-loader",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
optimization: {
|
||||
minimize: true,
|
||||
},
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
"process.env": {
|
||||
// This has effect on the react lib size
|
||||
NODE_ENV: JSON.stringify("production"),
|
||||
},
|
||||
}),
|
||||
],
|
||||
};
|
||||
@ -39,6 +39,7 @@ INSTALLED_APPS = [
|
||||
'django.contrib.staticfiles',
|
||||
'rest_framework',
|
||||
'api',
|
||||
'frontend.apps.FrontendConfig',
|
||||
]
|
||||
|
||||
MIDDLEWARE = [
|
||||
|
||||
@ -19,4 +19,5 @@ from django.urls import path, include
|
||||
urlpatterns = [
|
||||
path('admin/', admin.site.urls),
|
||||
path('api/', include('api.urls')),
|
||||
path('', include('frontend.urls'))
|
||||
]
|
||||
|
||||
36
setup.md
36
setup.md
@ -7,11 +7,14 @@
|
||||
`pip install virtualenvwrapper`
|
||||
|
||||
### Add to .bashrc
|
||||
`export WORKON_HOME=$HOME/.virtualenvs
|
||||
|
||||
```
|
||||
export WORKON_HOME=$HOME/.virtualenvs
|
||||
export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
|
||||
export VIRTUALENVWRAPPER_VIRTUALENV_ARGS=' -p /usr/bin/python3 '
|
||||
export PROJECT_HOME=$HOME/Devel
|
||||
source /usr/local/bin/virtualenvwrapper.sh`
|
||||
source /usr/local/bin/virtualenvwrapper.sh
|
||||
```
|
||||
|
||||
### Reload startup file
|
||||
`source ~/.bashrc`
|
||||
@ -26,3 +29,32 @@ source /usr/local/bin/virtualenvwrapper.sh`
|
||||
`pip3 install django djangorestframework`
|
||||
|
||||
*Django 4.0 at the time of writting*
|
||||
|
||||
### Launch the local development node
|
||||
|
||||
```
|
||||
python3 manage.py makemigrations
|
||||
python3 manage.py migrate
|
||||
python3 manage.py runserver
|
||||
```
|
||||
|
||||
## React development environment
|
||||
### Install npm
|
||||
`sudo apt install npm`
|
||||
|
||||
No need to repeat, this is the list of npm packages we use
|
||||
```
|
||||
cd frontend
|
||||
npm init -y
|
||||
npm i webpack webpack-cli --save-dev
|
||||
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
|
||||
npm i react react-dom --save-dev
|
||||
npm install @material-ui/core
|
||||
npm install @babel/plugin-proposal-class-properties
|
||||
npm install react-router-dom@5.2.0
|
||||
npm install @material-ui/icons
|
||||
```
|
||||
|
||||
### Launch the React render
|
||||
from frontend/ directory
|
||||
`npm run dev`
|
||||
Loading…
Reference in New Issue
Block a user