Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-01-31 10:31:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Build frontend app test page using React

Browse Source
This commit is contained in:
Reckless_Satoshi 2022-01-01 15:58:44 -08:00
parent 44ddaef23b
commit e83f0295a5
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
15 changed files with 3204 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/babel.config.json Normal file
View 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
View File

File diff suppressed because it is too large Load Diff

29
frontend/package.json Normal file
View 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
View 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
View File

@ -0,0 +1 @@
import App from "./components/App";

20
frontend/static/css/index.css Normal file
View 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
View File

File diff suppressed because one or more lines are too long

35
frontend/static/frontend/main.js.LICENSE.txt Normal file
View 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
View 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
View File

@ -0,0 +1,6 @@
from django.urls import path
from .views import index
urlpatterns = [
path('', index),
]

3
frontend/views.py
View File

@ -1,3 +1,6 @@
from django.shortcuts import render from django.shortcuts import render
# Create your views here. # Create your views here.
def index(request, *args, **kwargs):
return render(request, 'frontend/index.html')

32
frontend/webpack.config.js Normal file
View 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"),
},
}),
],
};

1
robosats/settings.py
View File

@ -39,6 +39,7 @@ INSTALLED_APPS = [
'django.contrib.staticfiles', 'django.contrib.staticfiles',
'rest_framework', 'rest_framework',
'api', 'api',
'frontend.apps.FrontendConfig',
] ]
MIDDLEWARE = [ MIDDLEWARE = [

1
robosats/urls.py
View File

@ -19,4 +19,5 @@ from django.urls import path, include
urlpatterns = [ urlpatterns = [
path('admin/', admin.site.urls), path('admin/', admin.site.urls),
path('api/', include('api.urls')), path('api/', include('api.urls')),
path('', include('frontend.urls'))
] ]

36
setup.md
View File

@ -7,11 +7,14 @@
`pip install virtualenvwrapper` `pip install virtualenvwrapper`
### Add to .bashrc ### Add to .bashrc
`export WORKON_HOME=$HOME/.virtualenvs
```
export WORKON_HOME=$HOME/.virtualenvs
export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3 export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
export VIRTUALENVWRAPPER_VIRTUALENV_ARGS=' -p /usr/bin/python3 ' export VIRTUALENVWRAPPER_VIRTUALENV_ARGS=' -p /usr/bin/python3 '
export PROJECT_HOME=$HOME/Devel export PROJECT_HOME=$HOME/Devel
source /usr/local/bin/virtualenvwrapper.sh` source /usr/local/bin/virtualenvwrapper.sh
```
### Reload startup file ### Reload startup file
`source ~/.bashrc` `source ~/.bashrc`
@ -26,3 +29,32 @@ source /usr/local/bin/virtualenvwrapper.sh`
`pip3 install django djangorestframework` `pip3 install django djangorestframework`
*Django 4.0 at the time of writting* *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`