feat: Error pages + Makefile improvements

Error pages: Add error pages for 404 and 50X errors by nginx
Makefile improvements: Remove shit.sh and replace it by improving the
Makefile
This commit is contained in:
Alexander Polynomdivision 2018-10-03 20:24:06 +02:00
parent f836145981
commit 082f254da0
6 changed files with 58 additions and 17 deletions

View File

@ -1,12 +1,3 @@
dist/minified:
mkdir -p dist/minified
UGLIFYJS := ./node_modules/.bin/uglifyjs
# $1: The file to minify
define minify
$(shell ${UGLIFYJS} --mangle --compress -o "./dist/minified/$(notdir $1)" -- $1)
endef
node_modules: node_modules:
npm install npm install
@ -14,15 +5,25 @@ node_modules:
watch: node_modules watch: node_modules
npm start npm start
clean:
rm -rf dist/
.PHONY: build .PHONY: build
build: node_modules dist/minified build: prod
prod: node_modules clean
@echo Building with parcel @echo Building with parcel
./node_modules/.bin/parcel build --out-dir dist/app src/index.html ./node_modules/.bin/parcel build --out-dir dist/app src/index.html
./node_modules/.bin/parcel build --out-dir dist src/lost.html src/error.html
sed -e "s/\/src/\/app\/src/g" --in-place dist/app/index.html
@echo Minifying tar -czf lateinicus-web.tar.gz dist/
$(foreach file, $(wildcard dist/*.js), $(call minify, $(file)))
$(shell ls -lah ./dist/minified)
.PHONY: watch dev: node_modules clean
watch: @echo Building with parcel
npm start ./node_modules/.bin/parcel build --out-dir dist/app src/index.html
./node_modules/.bin/parcel build --out-dir dist src/lost.html src/error.html
sed -e "s/\/src/\/app\/src/g" --in-place dist/app/index.html
chmod 604 -R dist/app/*
chmod 604 dist/error.html dist/lost.html
chmod 705 dist dist/app

View File

@ -1 +0,0 @@
<!DOCTYPE html><html> <head> <title>Lateinicus</title> <meta charset="UTF-8"> <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"> <link rel="stylesheet" href="/app/src.33f51c10.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin=""></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin=""></script> </head> <body> <div id="app"></div> <script src="/app/src.02f6e325.js"></script> </body> </html>

View File

@ -2,6 +2,7 @@
rm -rf dist/ rm -rf dist/
./node_modules/.bin/parcel build --out-dir dist/app src/index.html ./node_modules/.bin/parcel build --out-dir dist/app src/index.html
./node_modules/.bin/parcel build --out-dir dist src/lost.html src/error.html
chmod 705 dist dist/app chmod 705 dist dist/app
chmod 604 dist/app/* chmod 604 dist/app/*

13
frontend/src/error.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>Lateinicus - 50X</title>
</head>
<body>
<h1>Du hast einen Serverfehler gefunden!</h1><br />
Das sollte nicht passieren... Das ist dann wohl meine Schuld...<br />
<img src="http://www.sharegif.com/wp-content/uploads/2013/11/anime-confused-gif.gif" />
<br />
<a href="/app/">Zu Lateinicus</a>
</body>
</html>

13
frontend/src/lost.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>Lateinicus - 404</title>
</head>
<body>
<h1>Du hast ein 404 entdeckt</h1><br />
Du solltest hier aber nicht sein...<br />
<img src="https://thumbs.gfycat.com/HealthyCornyAmazontreeboa-small.gif" />
<br />
<a href="/app/">Zu Lateinicus</a>
</body>
</html>

View File

@ -34,6 +34,20 @@ http {
gzip on; gzip on;
gzip_min_length 256K; gzip_min_length 256K;
error_page 404 /lost.html;
error_page 500 502 503 504 /error.html;
# Status page for 404
location = /error.html {
root /srv/www;
}
# Status page for 50X
location = /lost.html {
root /srv/www;
}
# Reverse Proxy # Reverse Proxy
location /api/ { location /api/ {
# Seems weird, but it is (Prevent /api/api/) # Seems weird, but it is (Prevent /api/api/)