From aeae5e68905b6f7210273043787a99ff4f98723a Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Thu, 17 Aug 2017 09:12:59 +0200 Subject: [PATCH 1/3] Fix the electron app --- package.json | 4 ++-- src/index.html | 6 +++--- src/main.js | 2 +- webpack.config.js | 6 +++++- 4 files changed, 11 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 90a5d76b7..104e5f580 100644 --- a/package.json +++ b/package.json @@ -15,8 +15,8 @@ "dist:win": "build --win --ia32 --x64", "dist:mac": "build --mac", "dist:linux": "build --linux --ia32 --x64 --armv7l", - "copy-files": "mkdir dist && cp -r ./src/index.html ./src/assets ./dist", - "clean": "del dist -f", + "copy-files": "mkdir app/dist && cp -r ./src/index.html ./src/assets ./app/dist", + "clean": "del app/dist -f", "storybook": "start-storybook -p 6006 -s ./src/", "build-storybook": "build-storybook" }, diff --git a/src/index.html b/src/index.html index ccfc0ac92..abbe93edf 100644 --- a/src/index.html +++ b/src/index.html @@ -3,12 +3,12 @@ lisk nano - +
- - + + diff --git a/src/main.js b/src/main.js index 0cbb57add..acf338c8c 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { BrowserRouter as Router } from 'react-router-dom'; +import { HashRouter as Router } from 'react-router-dom'; import { Provider } from 'react-redux'; import App from './components/app'; import store from './store'; diff --git a/webpack.config.js b/webpack.config.js index b5405b6ba..423c3ae74 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -24,7 +24,7 @@ module.exports = (env) => { return { entry: entries, output: { - path: path.resolve(__dirname, 'dist'), + path: path.resolve(__dirname, 'app', 'dist'), filename: env.test ? 'bundle.js' : 'bundle.[name].js', }, devServer: { @@ -37,6 +37,10 @@ module.exports = (env) => { new webpack.DefinePlugin({ PRODUCTION: env.prod, TEST: env.test, + // because of https://fb.me/react-minification + 'process.env': env.prod ? { + NODE_ENV: JSON.stringify('production'), + } : null, }), new ExtractTextPlugin({ filename: 'styles.css', From a33afb7807221812ec4257403f0f3f66d0336338 Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Thu, 17 Aug 2017 17:39:46 +0200 Subject: [PATCH 2/3] Change fonts to be relative It makes webpack to include them in base64 in styles.css That solves electron not finding the fonts Thank you @alepop for the solution --- package.json | 2 +- .../fonts/material-design-icons/style.css | 8 ++--- src/assets/fonts/roboto-mono/style.css | 36 +++++++++---------- src/assets/fonts/roboto/style.css | 36 +++++++++---------- 4 files changed, 41 insertions(+), 41 deletions(-) diff --git a/package.json b/package.json index 104e5f580..ed980e2e6 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "dist:win": "build --win --ia32 --x64", "dist:mac": "build --mac", "dist:linux": "build --linux --ia32 --x64 --armv7l", - "copy-files": "mkdir app/dist && cp -r ./src/index.html ./src/assets ./app/dist", + "copy-files": "mkdir app/dist && cp -r ./src/index.html ./app/dist", "clean": "del app/dist -f", "storybook": "start-storybook -p 6006 -s ./src/", "build-storybook": "build-storybook" diff --git a/src/assets/fonts/material-design-icons/style.css b/src/assets/fonts/material-design-icons/style.css index 770d22937..d7e7bcab0 100644 --- a/src/assets/fonts/material-design-icons/style.css +++ b/src/assets/fonts/material-design-icons/style.css @@ -5,12 +5,12 @@ font-family: 'Material Icons'; font-style: normal; font-weight: 400; - src: url('/assets/fonts/material-design-icons/MaterialIcons-Regular.eot'); /* For IE6-8 */ + src: url('../../assets/fonts/material-design-icons/MaterialIcons-Regular.eot'); /* For IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), - url('/assets/fonts/material-design-icons/MaterialIcons-Regular.woff2') format('woff2'), - url('/assets/fonts/material-design-icons/MaterialIcons-Regular.woff') format('woff'), - url('/assets/fonts/material-design-icons/MaterialIcons-Regular.ttf') format('truetype'); + url('../../assets/fonts/material-design-icons/MaterialIcons-Regular.woff2') format('woff2'), + url('../../assets/fonts/material-design-icons/MaterialIcons-Regular.woff') format('woff'), + url('../../assets/fonts/material-design-icons/MaterialIcons-Regular.ttf') format('truetype'); } :global .material-icons { font-family: 'Material Icons'; diff --git a/src/assets/fonts/roboto-mono/style.css b/src/assets/fonts/roboto-mono/style.css index efae43c44..3ed0f6b02 100644 --- a/src/assets/fonts/roboto-mono/style.css +++ b/src/assets/fonts/roboto-mono/style.css @@ -6,37 +6,37 @@ font-family: 'Roboto Mono'; font-style: normal; font-weight: 400; - src: url('/assets/fonts/roboto-mono/roboto-mono-v4-latin-regular.eot'); /* IE9 Compat Modes */ + src: url('../../assets/fonts/roboto-mono/roboto-mono-v4-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Roboto Mono'), local('RobotoMono-Regular'), - url('/assets/fonts/roboto-mono/roboto-mono-v4-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('/assets/fonts/roboto-mono/roboto-mono-v4-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ - url('/assets/fonts/roboto-mono/roboto-mono-v4-latin-regular.woff') format('woff'), /* Modern Browsers */ - url('/assets/fonts/roboto-mono/roboto-mono-v4-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ - url('/assets/fonts/roboto-mono/roboto-mono-v4-latin-regular.svg#RobotoMono') format('svg'); /* Legacy iOS */ + url('../../assets/fonts/roboto-mono/roboto-mono-v4-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../../assets/fonts/roboto-mono/roboto-mono-v4-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ + url('../../assets/fonts/roboto-mono/roboto-mono-v4-latin-regular.woff') format('woff'), /* Modern Browsers */ + url('../../assets/fonts/roboto-mono/roboto-mono-v4-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ + url('../../assets/fonts/roboto-mono/roboto-mono-v4-latin-regular.svg#RobotoMono') format('svg'); /* Legacy iOS */ } /* roboto-mono-500 - latin */ @font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 500; - src: url('/assets/fonts/roboto-mono/roboto-mono-v4-latin-500.eot'); /* IE9 Compat Modes */ + src: url('../../assets/fonts/roboto-mono/roboto-mono-v4-latin-500.eot'); /* IE9 Compat Modes */ src: local('Roboto Mono Medium'), local('RobotoMono-Medium'), - url('/assets/fonts/roboto-mono/roboto-mono-v4-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('/assets/fonts/roboto-mono/roboto-mono-v4-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ - url('/assets/fonts/roboto-mono/roboto-mono-v4-latin-500.woff') format('woff'), /* Modern Browsers */ - url('/assets/fonts/roboto-mono/roboto-mono-v4-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ - url('/assets/fonts/roboto-mono/roboto-mono-v4-latin-500.svg#RobotoMono') format('svg'); /* Legacy iOS */ + url('../../assets/fonts/roboto-mono/roboto-mono-v4-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../../assets/fonts/roboto-mono/roboto-mono-v4-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ + url('../../assets/fonts/roboto-mono/roboto-mono-v4-latin-500.woff') format('woff'), /* Modern Browsers */ + url('../../assets/fonts/roboto-mono/roboto-mono-v4-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ + url('../../assets/fonts/roboto-mono/roboto-mono-v4-latin-500.svg#RobotoMono') format('svg'); /* Legacy iOS */ } /* roboto-mono-700 - latin */ @font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 700; - src: url('/assets/fonts/roboto-mono/roboto-mono-v4-latin-700.eot'); /* IE9 Compat Modes */ + src: url('../../assets/fonts/roboto-mono/roboto-mono-v4-latin-700.eot'); /* IE9 Compat Modes */ src: local('Roboto Mono Bold'), local('RobotoMono-Bold'), - url('/assets/fonts/roboto-mono/roboto-mono-v4-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('/assets/fonts/roboto-mono/roboto-mono-v4-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ - url('/assets/fonts/roboto-mono/roboto-mono-v4-latin-700.woff') format('woff'), /* Modern Browsers */ - url('/assets/fonts/roboto-mono/roboto-mono-v4-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ - url('/assets/fonts/roboto-mono/roboto-mono-v4-latin-700.svg#RobotoMono') format('svg'); /* Legacy iOS */ + url('../../assets/fonts/roboto-mono/roboto-mono-v4-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../../assets/fonts/roboto-mono/roboto-mono-v4-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ + url('../../assets/fonts/roboto-mono/roboto-mono-v4-latin-700.woff') format('woff'), /* Modern Browsers */ + url('../../assets/fonts/roboto-mono/roboto-mono-v4-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ + url('../../assets/fonts/roboto-mono/roboto-mono-v4-latin-700.svg#RobotoMono') format('svg'); /* Legacy iOS */ } diff --git a/src/assets/fonts/roboto/style.css b/src/assets/fonts/roboto/style.css index 1c22de376..f64079865 100644 --- a/src/assets/fonts/roboto/style.css +++ b/src/assets/fonts/roboto/style.css @@ -6,37 +6,37 @@ font-family: 'Roboto'; font-style: normal; font-weight: 400; - src: url('/assets/fonts/roboto/roboto-v15-latin-regular.eot'); /* IE9 Compat Modes */ + src: url('../../assets/fonts/roboto/roboto-v15-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Roboto'), local('Roboto-Regular'), - url('/assets/fonts/roboto/roboto-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('/assets/fonts/roboto/roboto-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ - url('/assets/fonts/roboto/roboto-v15-latin-regular.woff') format('woff'), /* Modern Browsers */ - url('/assets/fonts/roboto/roboto-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ - url('/assets/fonts/roboto/roboto-v15-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */ + url('../../assets/fonts/roboto/roboto-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../../assets/fonts/roboto/roboto-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ + url('../../assets/fonts/roboto/roboto-v15-latin-regular.woff') format('woff'), /* Modern Browsers */ + url('../../assets/fonts/roboto/roboto-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ + url('../../assets/fonts/roboto/roboto-v15-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-500 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; - src: url('/assets/fonts/roboto/roboto-v15-latin-500.eot'); /* IE9 Compat Modes */ + src: url('../../assets/fonts/roboto/roboto-v15-latin-500.eot'); /* IE9 Compat Modes */ src: local('Roboto Medium'), local('Roboto-Medium'), - url('/assets/fonts/roboto/roboto-v15-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('/assets/fonts/roboto/roboto-v15-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ - url('/assets/fonts/roboto/roboto-v15-latin-500.woff') format('woff'), /* Modern Browsers */ - url('/assets/fonts/roboto/roboto-v15-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ - url('/assets/fonts/roboto/roboto-v15-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */ + url('../../assets/fonts/roboto/roboto-v15-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../../assets/fonts/roboto/roboto-v15-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ + url('../../assets/fonts/roboto/roboto-v15-latin-500.woff') format('woff'), /* Modern Browsers */ + url('../../assets/fonts/roboto/roboto-v15-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ + url('../../assets/fonts/roboto/roboto-v15-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-700 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; - src: url('/assets/fonts/roboto/roboto-v15-latin-700.eot'); /* IE9 Compat Modes */ + src: url('../../assets/fonts/roboto/roboto-v15-latin-700.eot'); /* IE9 Compat Modes */ src: local('Roboto Bold'), local('Roboto-Bold'), - url('/assets/fonts/roboto/roboto-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('/assets/fonts/roboto/roboto-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ - url('/assets/fonts/roboto/roboto-v15-latin-700.woff') format('woff'), /* Modern Browsers */ - url('/assets/fonts/roboto/roboto-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ - url('/assets/fonts/roboto/roboto-v15-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */ + url('../../assets/fonts/roboto/roboto-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../../assets/fonts/roboto/roboto-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ + url('../../assets/fonts/roboto/roboto-v15-latin-700.woff') format('woff'), /* Modern Browsers */ + url('../../assets/fonts/roboto/roboto-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ + url('../../assets/fonts/roboto/roboto-v15-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */ } From aa6dc2a6e8c1c1fc3f4977d29989c5a88c714f14 Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Fri, 18 Aug 2017 09:04:54 +0200 Subject: [PATCH 3/3] Fix unit tests The error was: Uncaught TypeError: Cannot read property 'NODE_ENV' of null --- webpack.config.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index 423c3ae74..0d35593bd 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -38,9 +38,9 @@ module.exports = (env) => { PRODUCTION: env.prod, TEST: env.test, // because of https://fb.me/react-minification - 'process.env': env.prod ? { - NODE_ENV: JSON.stringify('production'), - } : null, + 'process.env': { + NODE_ENV: env.prod ? JSON.stringify('production') : null, + }, }), new ExtractTextPlugin({ filename: 'styles.css',