bump

README.md

@@ -16,17 +16,17 @@ Tailor also injects a RequireJS bundle to your template so you're able to use We
 
 ## Fragments
 
-Fragments are small applications. 
+Fragments are small applications.
 
 They might be React applications, or any other implementation.
 
-Fragments do not need to necessarily render something. 
+Fragments do not need to necessarily render something.
 
 This app consists basically in a couple of fragments:
 
  - fragment-common
  - fragment-header
- - fragment-applications-react
+ - fragment-react
  - fragment-chat
 
 Each fragment contains it's own `webpack.config.js` that specifies how to build it.

docker-compose.yml

@@ -11,14 +11,22 @@ services:
     depends_on:
       - jaeger
 
-  fragment-simple-vue-test:
-    build: packages/fragment-simple-vue-test
+  fragment-vue-client:
+    build: packages/fragment-vue-client
+    #restart: always
+
+  fragment-vue-file-read:
+    build: packages/fragment-vue-file-read
     #restart: always
 
   fragment-vue-http:
     build: packages/fragment-vue-http
     #restart: always
 
+  fragment-react:
+    build: packages/fragment-react
+    #restart: always
+
   fragment-dotnet:
     build: packages/fragment-dotnet
     ports:

index.js

@@ -26,10 +26,10 @@ const logger = bunyan.createLogger({
 const z = new Map();
 const tailor = new Tailor({
   templatesPath: __dirname + '/templates',
-	requestFragment(url, attributes, request, span = null) {
-  	const src = z.get(attributes.id);
-		return tailorFragment(filterReqHeadersFn)(src, attributes, request, span)
-	},
+	// requestFragment(url, attributes, request, span = null) {
+  // 	const src = z.get(attributes.id);
+	// 	return tailorFragment(filterReqHeadersFn)(src, attributes, request, span)
+	// },
 	tracer: initTracer(
 		config,
 		{
@@ -50,7 +50,7 @@ module.exports = async (request, response) => {
 	Object.values(services)
 		.forEach((a) => {
 			console.log(a);
-			z.set(a.Service, 'http://' + a.ServiceAddress + ':' + a.ServicePort)
+			z.set(a.Service, 'http://' + a.Address + ':' + a.Port)
 		})
 
 	if (request.url === '/favicon.ico') {

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "mosaic-tailor-react-example",
+  "name": "frontend-microservices",
   "version": "1.0.0",
-  "description": "mosaic-tailor-react-example",
+  "description": "Frontend microservices",
   "main": "index.js",
   "scripts": {
     "start": "micro -l tcp://0.0.0.0:80",
@@ -12,14 +12,14 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/tsnolan23/mosaic-tailor-react-example.git"
+    "url": "git+https://github.com/morriq/Frontend-microservices.git"
   },
-  "author": "",
+  "author": "morriq<[email protected]>",
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/tsnolan23/mosaic-tailor-react-example/issues"
+    "url": "https://github.com/morriq/Frontend-microservices/issues"
   },
-  "homepage": "https://github.com/tsnolan23/mosaic-tailor-react-example#readme",
+  "homepage": "https://github.com/morriq/Frontend-microservices#readme",
   "devDependencies": {
     "babel-eslint": "^9.0.0",
     "eslint": "^5.6.0",

packages/fragment-common/environment.js

@@ -8,7 +8,8 @@ const setAddress = (address) => ({ address })
 const setPort = port => ({ port })
 
 const getUrlFromPort = (port) => (path) => {
-	return `//test.local:${port}/${path}`
+	// @todo
+	return `//localhost:${port}/${path}`
 }
 
 const { env } = process

packages/fragment-react/environment.js

@@ -0,0 +1,28 @@
+const { machineIdSync } = require('node-machine-id')
+const { address } = require('ip')
+
+
+const setId = (id) => ({ id })
+const setName = (name) => ({ name })
+const setAddress = (address) => ({ address })
+const setPort = port => ({ port })
+
+const getUrlFromPort = (port) => (path) => {
+	// @todo
+	return `//localhost:${port}/${path}`
+}
+
+const { env } = process
+const {
+	npm_package_name,
+	npm_package_config_port
+} = env
+
+module.exports = ({
+	...setId(machineIdSync()),
+	...setName(npm_package_name),
+	...setAddress(address()),
+	...setPort(Number(npm_package_config_port)),
+
+	getUrl: getUrlFromPort(npm_package_config_port)
+})

packages/fragment-applications-react/index.js → packages/fragment-react/index.js

@@ -1,13 +1,31 @@
-const { presets } = require('./.babelrc.js');
+const consul = require('consul')
+const { createReadStream } = require('fs')
+const url = require('url')
+
+const { presets } = require('./.babelrc.js')
 
 require('@babel/register')({
   presets
-});
+})
+
+const renderStream = require('./render-stream.js')
+const { id, address, name, port } = require('./environment.js')
 
-const url = require('url')
-const { createReadStream } = require('fs')
-const renderStream = require('./render-stream.js');
 
+const { agent } = consul({
+	host: 'consul',
+	promisify: true
+})
+
+agent.service.register({
+	id,
+	name,
+	address,
+	port
+})
+	.catch(() => {
+		'logowanie do spana'
+	})
 
 module.exports = (req, res) => {
 	const pathname = url.parse(req.url).pathname
@@ -16,18 +34,18 @@ module.exports = (req, res) => {
 		case '/dist/bundle.js':
 			res.writeHead(200, jsHeader)
 			createReadStream('./dist/bundle.js').pipe(res)
-      break;
+      break
 		default:
 			res.writeHead(200, {
 				'Content-Type': 'text/html',
-				'Link': '<http://localhost:80/dist/bundle.js>; rel="fragment-script"'
+				'Link': '<http://localhost:80/dist/bundle.js> rel="fragment-script"'
 			})
 
 			renderStream().then(({ stream, state }) => {
 				res.write(`
      			<script>window.CONTACTS_STATE = ${JSON.stringify(state).replace(/</g, '\\\u003c')}</script>
-      `);
-				stream.pipe(res);
-			});
+      `)
+				stream.pipe(res)
+			})
 	}
 }

packages/fragment-applications-react/package.json → packages/fragment-react/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "fragment-contacts",
+  "name": "fragment-react",
   "sideEffects": false,
   "version": "1.0.0",
   "description": "",
@@ -16,7 +16,10 @@
   "dependencies": {
     "axios": "^0.18.0",
     "classnames": "^2.2.5",
+    "consul": "^0.34.0",
+    "ip": "^1.1.5",
     "micro": "^9.3.3",
+    "node-machine-id": "^1.1.10",
     "prop-types": "^15.6.2",
     "react": "^16.1.1",
     "react-dom": "^16.1.1",

packages/fragment-vue-client/environment.js

@@ -0,0 +1,28 @@
+const { machineIdSync } = require('node-machine-id')
+const { address } = require('ip')
+
+
+const setId = (id) => ({ id })
+const setName = (name) => ({ name })
+const setAddress = (address) => ({ address })
+const setPort = port => ({ port })
+
+const getUrlFromPort = (port) => (path) => {
+	// @todo
+	return `//localhost:${port}/${path}`
+}
+
+const { env } = process
+const {
+	npm_package_name,
+	npm_package_config_port
+} = env
+
+module.exports = ({
+	...setId(machineIdSync()),
+	...setName(npm_package_name),
+	...setAddress(address()),
+	...setPort(Number(npm_package_config_port)),
+
+	getUrl: getUrlFromPort(npm_package_config_port)
+})

packages/fragment-vue-client/index.js

@@ -0,0 +1,43 @@
+const consul = require('consul')
+const url = require('url')
+const { createReadStream } = require('fs')
+
+const { id, address, name, port } = require('./environment.js')
+const renderStream = require('./render-stream.js')
+
+
+const bundleStream = createReadStream('./dist/bundle.js')
+
+
+const { agent } = consul({
+	host: 'consul',
+	promisify: true
+})
+
+agent.service.register({
+	id,
+	name,
+	address,
+	port
+})
+	.catch(() => {
+		'logowanie do spana'
+	})
+
+module.exports = (req, res) => {
+	const pathname = url.parse(req.url).pathname
+	const jsHeader = { 'Content-Type': 'application/javascript' }
+	switch(pathname) {
+		case '/dist/bundle.js':
+			res.writeHead(200, jsHeader)
+			bundleStream.pipe(res)
+			break
+		default:
+			res.writeHead(200, {
+				'Content-Type': 'text/html',
+				'Link': '<http://localhost:80/dist/bundle.js> rel="fragment-script"'
+			})
+
+			renderStream().pipe(res)
+	}
+}