Sākums Izpētīt Palīdzība
Pierakstīties
Febbweiss
/
springboot-react-webpack
spogulis no https://github.com/Febbweiss/springboot-react-webpack
1
0
Atdalīts 0
Faili Problēmas 0 Vikivietne
Pārlūkot izejas kodu

Optim: populate html template with resource links and hash

fecaille 9 gadi atpakaļ
vecāks
2115d30c32
revīzija
6251fcf075
6 mainītis faili ar 66 papildinājumiem un 12 dzēšanām
Dalītais skats Rādīt salīdzināšanas statistiku
  1. 2 0
      package.json
  2. 12 1
      src/main/java/com/opengroupe/cloud/saas/Application.java
  3. 4 0
      src/main/resources/static/js/app.render.jsx
  4. 2 0
      src/main/resources/static/js/nashorn-polyfill.js
  5. 20 0
      src/main/resources/templates/index-template.html
  6. 26 11
      webpack.config.js

+ 2 - 0
package.json
Parādīt failu 

@@ -17,6 +17,8 @@
 
     "css-loader": "^0.23.1",
 
     "extract-text-webpack-plugin": "^1.0.1",
 
     "file-loader": "^0.8.5",
 
+    "html-loader": "^0.4.3",
 
+    "html-webpack-plugin": "^2.15.0",
 
     "postcss-loader": "^0.8.2",
 
     "style-loader": "^0.13.1",
 
     "url-loader": "^0.5.7",

+ 12 - 1
src/main/java/com/opengroupe/cloud/saas/Application.java
Parādīt failu 

@@ -2,7 +2,8 @@ package com.opengroupe.cloud.saas;
 
 
 import org.springframework.boot.SpringApplication;
 
 import org.springframework.boot.autoconfigure.SpringBootApplication;
 
-import org.springframework.boot.autoconfigure.security.oauth2.client.EnableOAuth2Sso;
 
+import org.springframework.context.annotation.Bean;
 
+import org.thymeleaf.templateresolver.ServletContextTemplateResolver;
 
 
 //@EnableOAuth2Sso
 
 @SpringBootApplication
 
@@ -11,4 +12,14 @@ public class Application {
 
 	public static void main(String[] args) {
 
 		SpringApplication.run(Application.class, args);
 
 	}
 
+	
+	@Bean
 
+	public ServletContextTemplateResolver templateResolver() {
 
+	    ServletContextTemplateResolver resolver = new ServletContextTemplateResolver();
 
+	    resolver.setPrefix("/templates/");
 
+	    resolver.setSuffix(".html");
 
+	    resolver.setTemplateMode("LEGACYHTML5");
 
+	    resolver.setCacheable(false);
 
+	    return resolver;
 
+	}
 
 }

+ 4 - 0
src/main/resources/static/js/app.render.jsx
Parādīt failu 

@@ -5,6 +5,7 @@ import React from 'react';
 
 import ReactDOM from 'react-dom';
 
 import ReactDOMServer from 'react-dom/server';
 
 import App from './app.jsx';
 
+import $ from 'jquery';
 
 
 
 require('bootstrap/dist/css/bootstrap.css');
 
@@ -25,3 +26,6 @@ global.renderServer = function (comments) {
 
     );
 
 };
 
 
+if( !global.nashorn ) {
 
+	renderClient(initialData);
 
+};

+ 2 - 0
src/main/resources/static/js/nashorn-polyfill.js
Parādīt failu 

@@ -1,5 +1,7 @@
 
 var global = window = this;
 
 
+global.nashorn = true;
 
+
 
 var console = {
 
 	debug: print,
 
 	warn: print,

+ 20 - 0
src/main/resources/templates/index-template.html
Parādīt failu 

@@ -0,0 +1,20 @@
 
+<!DOCTYPE html>
 
+<html xmlns:th="http://www.thymeleaf.org">
 
+<head lang="en">
 
+  <meta charset="UTF-8" />
 
+  <title>Comments channel</title>
 
+</head>
 
+<body>
 
+	<div th:replace="fragments/header"></div>
 
+
 
+	<div class="container">
 
+		<div id="content" th:utext="${markup}"></div>
 
+	</div>
 
+
 
+	<div th:replace="fragments/footer"></div>
 
+	
+	<script th:inline="javascript">
 
+        var initialData = JSON.parse(/*[[${data}]]*/ '[]');
 
+	</script>
 
+</body>
 
+</html>

+ 26 - 11
webpack.config.js
Parādīt failu 

@@ -1,15 +1,16 @@
 
 var path				= require('path'),
 
 	webpack				= require('webpack'),
 
 	CommonsChunkPlugin	= require("webpack/lib/optimize/CommonsChunkPlugin"),
 
-	ExtractTextPlugin	= require("extract-text-webpack-plugin");
 
+	ExtractTextPlugin	= require("extract-text-webpack-plugin"),
 
+	HtmlWebpackPlugin	= require('html-webpack-plugin');
 
 
-var source_dir = __dirname + '/src/main/resources/static/js',
 
+var source_dir = __dirname + '/src/main/resources/static',
 
 	node_dir = __dirname + '/node_modules';
 
 
 var config = {
 
     entry: {
 
-    	app: [source_dir + '/app.render'],
 
-    	vendors: [source_dir + '/vendors']
 
+    	app: [source_dir + '/js/app.render'],
 
+    	vendors: [source_dir + '/js/vendors']
 
     },
 
     resolve: {
 
     	extensions: ['', '.js', '.jsx', '.css']
 
@@ -18,12 +19,19 @@ var config = {
 
     cache: true,
 
     debug: true,
 
     output: {
 
-        path: './target/classes/static/js',
 
-        filename: '[name].bundle.js'        
+        path: './target/classes/static',
 
+        filename: 'js/[name].bundle.js',
 
+        publicPath: '/'
 
     },
 
     plugins: [
 
-        new ExtractTextPlugin("../css/[name].css"),
 
+        new ExtractTextPlugin("css/[name].css"),
 
         new CommonsChunkPlugin("vendors", null, true),
 
+        new HtmlWebpackPlugin({
 
+        	template: path.join(__dirname, 'src/main/resources/templates/index-template.html'),
 
+        	filename: '../templates/index.html',
 
+        	xhtml: true,
 
+        	hash: true
 
+        })
 
     ],
 
     module: {
 
         loaders: [
 
@@ -42,24 +50,31 @@ var config = {
 
 			},
 
 			{ 
             	test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
-            	loader: "file?name=../css/[name].[ext]" 
+            	loader: "file?name=font/[name].[ext]" 
             },
 
 			{ 
             	test: /\.(woff|woff2)$/, 
-            	loader:"url?prefix=font/&limit=5000&name=../css/[name].[ext]" 
+            	loader:"url?prefix=font/&limit=5000&name=font/[name].[ext]" 
             },
 
 			{ 
             	test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
-            	loader: "url?limit=10000&mimetype=application/octet-stream&&name=../css/[name].[ext]" 
+            	loader: "url?limit=10000&mimetype=application/octet-stream&&name=font/[name].[ext]" 
             },
 
 			{ 
             	test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
-            	loader: "url?limit=10000&mimetype=image/svg+xml&&name=../css/[name].[ext]" 
+            	loader: "url?limit=10000&mimetype=image/svg+xml&&name=font/[name].[ext]" 
+            },
 
+            { 
+            	test: /\.html$/, 
+            	loader: 'html-loader?minimize=false' 
             }
 
         ]
 
     },
 
     postcss: function () {
 
         return [];
 
+    },
 
+    htmlLoader: {
 
+    	removeAttributeQuotes: false,
 
     }
 
 };