Serve static assets through NGINX and React

99linesofcode · Dec 18, 2017 · 1b63ffa · 1b63ffa
1 parent a18bb15
commit 1b63ffa
Show file tree

Hide file tree

Showing 12 changed files with 4,458 additions and 11 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -2,7 +2,8 @@ version: '3'
 
 services:
   web:
-    image: nginx
+    build:
+      context: ./web
     ports:
       - "80:80"
     volumes:

diff --git a/etc/nginx/conf.d/default.conf b/etc/nginx/conf.d/default.conf
@@ -1,14 +1,17 @@
+charset utf-8;
+
 server {
-    listen 80;
+  listen 80;
 
-    root /usr/share/nginx/html;
+  root /usr/share/nginx/html;
 
-    location / {
-        try_files $uri @wsgi;
-    }
+  location / {
+      root /usr/share/nginx/html/public;
+      try_files $uri /index.html;
+  }
 
-    location @wsgi {
-        include uwsgi_params;
-        uwsgi_pass flask:3031;
-    }
+  location /api/ {
+      include uwsgi_params;
+      uwsgi_pass flask:3031;
+  }
 }
diff --git a/flask/app/__init__.py b/flask/app/__init__.py
@@ -8,6 +8,6 @@ def create_app():
     app = Flask(__name__, static_folder='static', template_folder='templates')
 
     # register blueprints
-    app.register_blueprint(api)
+    app.register_blueprint(api, url_prefix='/api')
 
     return app
diff --git a/web/.dockerignore b/web/.dockerignore
@@ -0,0 +1,2 @@
+node_modules
+build
diff --git a/web/Dockerfile b/web/Dockerfile
@@ -0,0 +1,10 @@
+FROM node:9.3 as build-deps
+LABEL maintainer="[email protected]"
+WORKDIR /usr/src/app
+COPY package.json yarn.lock ./
+RUN yarn
+COPY . ./
+RUN yarn build
+
+FROM nginx:1.13
+COPY --from=build-deps /usr/src/app/build /usr/share/nginx/html/public
diff --git a/web/assets/components/App.jsx b/web/assets/components/App.jsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import { BrowserRouter as Router, Route } from 'react-router-dom'
+
+export default class App extends React.Component {
+  render() {
+    return <div className="wrapper"></div>
+  }
+}
diff --git a/web/assets/index.html b/web/assets/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+
+    <title></title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <!--[if lte IE 9]>
+        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
+    <![endif]-->
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/web/assets/index.jsx b/web/assets/index.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './components/App.jsx';
+
+import 'normalize-css/normalize.css';
+import './stylesheets/main.sass';
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/web/assets/stylesheets/main.sass b/web/assets/stylesheets/main.sass
diff --git a/web/package.json b/web/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "base",
+  "version": "0.0.1",
+  "description": "",
+  "author": "Jordy Schreuders <[email protected]>",
+  "license": "MIT",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack --config webpack.config.js"
+  },
+  "dependencies": {
+    "normalize-css": "^2.3.1",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-router": "^4.2.0",
+    "react-router-dom": "^4.2.2"
+  },
+  "devDependencies": {
+    "babel-core": "^6.24.1",
+    "babel-loader": "^7.0.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "css-loader": "^0.28.4",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "html-webpack-plugin": "^2.30.1",
+    "node-sass": "^4.5.3",
+    "sass-loader": "^6.0.6",
+    "style-loader": "^0.19.0",
+    "webpack": "^3.8.1"
+  }
+}
diff --git a/web/webpack.config.js b/web/webpack.config.js
@@ -0,0 +1,37 @@
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const webpack = require('webpack');
+const path = require('path');
+
+module.exports = {
+  entry: './assets/index.jsx',
+  output: {
+    path: path.resolve(__dirname, 'build/'),
+    filename: 'main.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        loader: 'babel-loader',
+        query: {
+          babelrc: false,
+          presets: ["env", "react"]
+        },
+        exclude: /node_modules/
+      },
+      {
+        test: /\.sass|.css$/,
+        loader: ExtractTextPlugin.extract({
+          fallback: "style-loader",
+          use: ["css-loader", "sass-loader"]
+        })
+      }
+    ]
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin(),
+    new ExtractTextPlugin({ filename: "bundle.css", allChunks: true }),
+    new HtmlWebpackPlugin({ template: "./assets/index.html", inject: "body" })
+  ]
+};