fix webpack dev serve

This commit is contained in:
Simon Larsen
2022-12-07 14:13:33 +00:00
parent 0df201ae33
commit 74cb5367c2
25 changed files with 105 additions and 66 deletions

3
.gitignore vendored
View File

@@ -8,7 +8,7 @@ node_modules
*/build/dist/*
# Build Dist
*/dist/*
**/dist/*
.idea
# testing
@@ -74,3 +74,4 @@ logs.txt
*/Cert.crt
*/Key.key
Nginx/default.conf

4
Accounts/nodemon.json Normal file
View File

@@ -0,0 +1,4 @@
{
"watch": ["webpack.config.js"],
"exec": "export DEBUG=express:* && webpack-dev-server --port=3003 --mode=development"
}

View File

@@ -18,7 +18,7 @@
"typescript": "^4.6.4"
},
"scripts": {
"dev": "webpack-dev-server --port=3003 --mode=development",
"dev": "nodemon",
"build": "webpack build --mode=production",
"test": "",
"compile": "tsc",

View File

@@ -15,16 +15,16 @@
<meta name="slack-app-id" content="ACVBMTPJQ">
<meta name="description" content="This is the login page for OneUptime Dashboard">
<link rel="manifest" href="./assets/img/favicons/ma">
<link rel="apple-touch-icon" sizes="180x180" href="./assets/img/favicons/apple-touch-icon.png">
<link rel="shortcut icon" href="./assets/img/favicons/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="194x194" href="./assets/img/favicons/favicon-194x194.png">
<link rel="icon" type="image/png" sizes="192x192" href="./assets/img/favicons/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/img/favicons/favicon-16x16.png">
<link rel="mask-icon" href="./assets/img/favicons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="manifest" href="/accounts/assets/img/favicons/ma">
<link rel="apple-touch-icon" sizes="180x180" href="/accounts/assets/img/favicons/apple-touch-icon.png">
<link rel="shortcut icon" href="/accounts/assets/img/favicons/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/accounts/assets/img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="194x194" href="/accounts/assets/img/favicons/favicon-194x194.png">
<link rel="icon" type="image/png" sizes="192x192" href="/accounts/assets/img/favicons/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="/accounts/assets/img/favicons/favicon-16x16.png">
<link rel="mask-icon" href="/accounts/assets/img/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#121212">
<meta name="msapplication-TileImage" content="./assets/img/favicons/mstile-144x144.png">
<meta name="msapplication-TileImage" content="/accounts/assets/img/favicons/mstile-144x144.png">
<meta name="theme-color" content="#121212">
@@ -32,10 +32,10 @@
<!-- Preload light, regular, medium and bold, which are fonts that are used on home -->
<link rel="preload" href="./assets/fonts/camphor/font1.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="./assets/fonts/camphor/font2.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="./assets/fonts/camphor/font3.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="./assets/fonts/camphor/font4.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="/accounts/assets/fonts/camphor/font1.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="/accounts/assets/fonts/camphor/font2.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="/accounts/assets/fonts/camphor/font3.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="/accounts/assets/fonts/camphor/font4.woff2" as="font" type="font/woff2" crossorigin="">
<!--
@@ -66,6 +66,6 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="./assets/bundle.js"></script>
<script src="/accounts/dist/bundle.js"></script>
</body>
</html>

View File

@@ -30,7 +30,7 @@ const ForgotPassword: FunctionComponent = () => {
>
<img
style={{ height: '40px' }}
src={`/accounts/public/${OneUptimeLogo}`}
src={`${OneUptimeLogo}`}
/>
</div>
<div className="text-center">

View File

@@ -37,7 +37,7 @@ const LoginPage: FunctionComponent = () => {
>
<img
style={{ height: '40px' }}
src={`/accounts/public/${OneUptimeLogo}`}
src={`${OneUptimeLogo}`}
/>
</div>
<div className="text-center">

View File

@@ -37,7 +37,7 @@ const RegisterPage: FunctionComponent = () => {
>
<img
style={{ height: '40px' }}
src={`/accounts/public/${OneUptimeLogo}`}
src={`${OneUptimeLogo}`}
/>
</div>
<div className="text-center">

View File

@@ -31,7 +31,7 @@ const RegisterPage: FunctionComponent = () => {
>
<img
style={{ height: '40px' }}
src={`/accounts/public/${OneUptimeLogo}`}
src={`${OneUptimeLogo}`}
/>
</div>
<div className="text-center">

View File

@@ -27,7 +27,7 @@ const SsoLoginPage: FunctionComponent = () => {
>
<img
style={{ height: '40px' }}
src={`/accounts/public/${OneUptimeLogo}`}
src={`${OneUptimeLogo}`}
/>
</div>
<div className="text-center">

View File

@@ -75,7 +75,7 @@ const VerifyEmail: FunctionComponent = () => {
>
<img
style={{ height: '40px' }}
src={`/accounts/public/${OneUptimeLogo}`}
src={`${OneUptimeLogo}`}
/>
</div>
{!error && (

View File

@@ -1,15 +1,19 @@
const path = require("path");
const webpack = require("webpack");
const dotenv = require('dotenv');
const express = require('express');
const readEnvFile = (pathToFile) => {
const parsed = dotenv.config({ path: pathToFile }).parsed;
const env = {};
for (const key in parsed) {
env[key] = JSON.stringify(parsed[key]);
}
return env;
}
@@ -18,8 +22,8 @@ module.exports = {
mode: "development",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
publicPath: "/assets/",
path: path.resolve(__dirname, "public", "dist"),
publicPath: "/accounts/dist/",
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.css', '.scss'],
@@ -56,7 +60,7 @@ module.exports = {
use: ['style-loader', 'css-loader']
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
test: /\.(jpe?g|png|gif|svg)$/i,
loader: 'file-loader'
}
],
@@ -66,7 +70,11 @@ module.exports = {
devMiddleware: {
writeToDisk: true,
},
allowedHosts: "all"
allowedHosts: "all",
setupMiddlewares: (middlewares, devServer) => {
devServer.app.use('/accounts/assets', express.static(path.resolve(__dirname, 'public', 'assets')));
return middlewares;
}
},
devtool: 'eval-source-map',
}

4
Dashboard/nodemon.json Normal file
View File

@@ -0,0 +1,4 @@
{
"watch": ["webpack.config.js"],
"exec": "export DEBUG=express:* && webpack-dev-server --port=3009 --mode=development"
}

View File

@@ -22,7 +22,7 @@
"use-async-effect": "^2.2.6"
},
"scripts": {
"dev": "webpack-dev-server --port=3009 --mode=development",
"dev": "nodemon",
"build": "webpack build --mode=production",
"test": "react-app-rewired test",
"eject": "webpack eject",

View File

@@ -15,16 +15,16 @@
<meta name="slack-app-id" content="ACVBMTPJQ">
<meta name="description" content="This is the login page for OneUptime Dashboard">
<link rel="manifest" href="./assets/img/favicons/ma">
<link rel="apple-touch-icon" sizes="180x180" href="./assets/img/favicons/apple-touch-icon.png">
<link rel="shortcut icon" href="./assets/img/favicons/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="194x194" href="./assets/img/favicons/favicon-194x194.png">
<link rel="icon" type="image/png" sizes="192x192" href="./assets/img/favicons/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/img/favicons/favicon-16x16.png">
<link rel="mask-icon" href="./assets/img/favicons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="manifest" href="/dashboard/assets/img/favicons/ma">
<link rel="apple-touch-icon" sizes="180x180" href="/dashboard/assets/img/favicons/apple-touch-icon.png">
<link rel="shortcut icon" href="/dashboard/assets/img/favicons/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/dashboard/assets/img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="194x194" href="/dashboard/assets/img/favicons/favicon-194x194.png">
<link rel="icon" type="image/png" sizes="192x192" href="/dashboard/assets/img/favicons/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="/dashboard/assets/img/favicons/favicon-16x16.png">
<link rel="mask-icon" href="/dashboard/assets/img/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#121212">
<meta name="msapplication-TileImage" content="./assets/img/favicons/mstile-144x144.png">
<meta name="msapplication-TileImage" content="/dashboard/assets/img/favicons/mstile-144x144.png">
<meta name="theme-color" content="#121212">
@@ -32,10 +32,10 @@
<!-- Preload light, regular, medium and bold, which are fonts that are used on home -->
<link rel="preload" href="./assets/fonts/camphor/font1.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="./assets/fonts/camphor/font2.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="./assets/fonts/camphor/font3.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="./assets/fonts/camphor/font4.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="/dashboard/assets/fonts/camphor/font1.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="/dashboard/assets/fonts/camphor/font2.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="/dashboard/assets/fonts/camphor/font3.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="/dashboard/assets/fonts/camphor/font4.woff2" as="font" type="font/woff2" crossorigin="">
<!--
@@ -65,6 +65,6 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="./assets/bundle.js"></script>
<script src="/dashboard/dist/bundle.js"></script>
</body>
</html>

View File

@@ -1,15 +1,19 @@
const path = require("path");
const webpack = require("webpack");
const dotenv = require('dotenv');
const express = require('express');
const readEnvFile = (pathToFile) => {
const parsed = dotenv.config({ path: pathToFile }).parsed;
const env = {};
for (const key in parsed) {
env[key] = JSON.stringify(parsed[key]);
}
return env;
}
@@ -18,8 +22,8 @@ module.exports = {
mode: "development",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
publicPath: "/assets/",
path: path.resolve(__dirname, "public", "dist"),
publicPath: "/dashboard/dist/",
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.css', '.scss'],
@@ -56,7 +60,7 @@ module.exports = {
use: ['style-loader', 'css-loader']
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
test: /\.(jpe?g|png|gif|svg)$/i,
loader: 'file-loader'
}
],
@@ -66,7 +70,11 @@ module.exports = {
devMiddleware: {
writeToDisk: true,
},
allowedHosts: "all"
allowedHosts: "all",
setupMiddlewares: (middlewares, devServer) => {
devServer.app.use('/dashboard/assets', express.static(path.resolve(__dirname, 'public', 'assets')));
return middlewares;
}
},
devtool: 'eval-source-map',
}

View File

@@ -107,7 +107,10 @@ server {
server {
listen 443 ssl; # Port HTTPS
listen 80;
server_name localhost;
server_name local.oneuptime.com;
ssl_certificate /etc/nginx/certs/Cert.crt;
ssl_certificate_key /etc/nginx/certs/Key.key;

View File

@@ -107,7 +107,10 @@ server {
server {
listen 443 ssl; # Port HTTPS
listen 80;
server_name localhost;
{{ if ne .Env.DOMAIN "localhost" }}
server_name {{ .Env.DOMAIN }};
{{ end }}
ssl_certificate /etc/nginx/certs/Cert.crt;
ssl_certificate_key /etc/nginx/certs/Key.key;
@@ -129,7 +132,7 @@ server {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass http://home/;
proxy_pass http://home;
}
location /accounts {
@@ -142,7 +145,7 @@ server {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass http://accounts/;
proxy_pass http://accounts;
}
location /dashboard {
@@ -155,7 +158,7 @@ server {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass http://dashboard/;
proxy_pass http://dashboard;
}
location /status-page {
@@ -168,7 +171,7 @@ server {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass http://status-page/;
proxy_pass http://status-page;
}
location /identity {
@@ -181,7 +184,7 @@ server {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass http://identity/;
proxy_pass http://identity;
}
location /file {
@@ -194,7 +197,7 @@ server {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass http://file/;
proxy_pass http://file;
client_max_body_size 50M;
}
@@ -209,7 +212,7 @@ server {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass http://dashboard-api/;
proxy_pass http://dashboard-api;
client_max_body_size 50M;
}
@@ -224,6 +227,6 @@ server {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass http://workers/;
proxy_pass http://workers;
}
}

View File

@@ -19,10 +19,10 @@
<!-- Preload light, regular, medium and bold, which are fonts that are used on home -->
<link rel="preload" href="./assets/fonts/camphor/font1.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="./assets/fonts/camphor/font2.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="./assets/fonts/camphor/font3.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="./assets/fonts/camphor/font4.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="/status-page/assets/fonts/camphor/font1.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="/status-page/assets/fonts/camphor/font2.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="/status-page/assets/fonts/camphor/font3.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="/status-page/assets/fonts/camphor/font4.woff2" as="font" type="font/woff2" crossorigin="">
<!--
@@ -52,6 +52,6 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="./assets/bundle.js"></script>
<script src="/status-page/dist/bundle.js"></script>
</body>
</html>

View File

@@ -30,7 +30,7 @@ const ForgotPassword: FunctionComponent = () => {
>
<img
style={{ height: '40px' }}
src={`/accounts/public/${OneUptimeLogo}`}
src={`${OneUptimeLogo}`}
/>
</div>
<div className="text-center">

View File

@@ -37,7 +37,7 @@ const LoginPage: FunctionComponent = () => {
>
<img
style={{ height: '40px' }}
src={`/accounts/public/${OneUptimeLogo}`}
src={`${OneUptimeLogo}`}
/>
</div>
<div className="text-center">

View File

@@ -31,7 +31,7 @@ const RegisterPage: FunctionComponent = () => {
>
<img
style={{ height: '40px' }}
src={`/accounts/public/${OneUptimeLogo}`}
src={`${OneUptimeLogo}`}
/>
</div>
<div className="text-center">

View File

@@ -1,15 +1,19 @@
const path = require("path");
const webpack = require("webpack");
const dotenv = require('dotenv');
const express = require('express');
const readEnvFile = (pathToFile) => {
const parsed = dotenv.config({ path: pathToFile }).parsed;
const env = {};
for (const key in parsed) {
env[key] = JSON.stringify(parsed[key]);
}
return env;
}
@@ -18,8 +22,8 @@ module.exports = {
mode: "development",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
publicPath: "/assets/",
path: path.resolve(__dirname, "public", "dist"),
publicPath: "/status-page/dist/",
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.css', '.scss'],
@@ -56,7 +60,7 @@ module.exports = {
use: ['style-loader', 'css-loader']
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
test: /\.(jpe?g|png|gif|svg)$/i,
loader: 'file-loader'
}
],
@@ -66,7 +70,11 @@ module.exports = {
devMiddleware: {
writeToDisk: true,
},
allowedHosts: "all"
allowedHosts: "all",
setupMiddlewares: (middlewares, devServer) => {
devServer.app.use('/status-page/assets', express.static(path.resolve(__dirname, 'public', 'assets')));
return middlewares;
}
},
devtool: 'eval-source-map',
}

0
backup.sh Normal file
View File

View File

@@ -45,7 +45,7 @@
"ps": "sudo docker compose ps",
"logs": "sudo docker compose logs --tail=100 -f $npm_config_services",
"write-logs": "sudo docker compose logs -f $npm_config_services > logs.txt",
"force-build": "npm run prerun && docker compose build --no-cache $npm_config_services",
"force-build": "npm run prerun && sudo docker compose build --no-cache $npm_config_services",
"force-build-dev": "npm run config-to-dev && npm run force-build",
"kill": "npm run stop",
"prod": "npm run prerun && docker compose up -d",

0
restore.sh Normal file
View File