Update

Author: bytesleo

.babelrc

@@ -1,6 +1,6 @@
 {
  "name": "electron-react-ant-boilerplate",
- "version": "1.0.2",
+ "version": "1.0.3",
  "description": "Electron, Webpack, React, Babel 7, ES6, PostCSS, SASS, Ant Design",
  "license": "MIT",
  "private": false,
@@ -64,8 +64,9 @@
  "antd-scss-theme-plugin": "^1.0.7",
  "babel-loader": "^8.0.5",
  "babel-plugin-import": "^1.11.0",
+ "babel-plugin-relative-path-import": "^2.0.1",
  "babili-webpack-plugin": "^0.1.2",
- "css-loader": "^2.1.0",
+ "css-loader": "^2.1.1",
  "electron": "^4.0.7",
  "electron-builder": "^20.38.5",
  "file-loader": "^3.0.1",
@@ -124,5 +125,33 @@
  "buildResources": "resources",
  "output": "release"
  }
+ },
+ "babel": {
+ "presets": [
+ "@babel/preset-env",
+ "@babel/preset-react"
+ ],
+ "plugins": [
+ [
+ "import",
+ {
+ "libraryName": "antd",
+ "style": true
+ }
+ ],
+ "@babel/plugin-proposal-class-properties",
+ "@babel/transform-runtime",
+ [
+ "babel-plugin-relative-path-import",
+ {
+ "paths": [
+ {
+ "rootPathPrefix": "@",
+ "rootPathSuffix": "src"
+ }
+ ]
+ }
+ ]
+ ]
  }
 }

package.json

@@ -11,4 +11,4 @@ class HelloWorld extends Component {
  }
 }
 
-export default HelloWorld;
+export default HelloWorld;

src/assets/images/logo.png

@@ -1,5 +1,5 @@
 .container {
  background: #fff;
  padding: 24px;
- height: calc(100vh - 186px);
+ height: calc(100vh - 187px);
 }

src/assets/styles/App.scss

@@ -1,13 +1,13 @@
-// Url API
-export const URL_API = 'http://localhost:8000';
+// Example url API
+export const URL_API = "http://localhost:8000";
 
-// Url socket
-export const URL_WS = 'http://localhost:8001';
+// Example Url socket
+export const URL_WS = "http://localhost:8001";
 
-// Key JWT
-export const KEY_JWT = 'ABC123456';
+// Example Key JWT
+export const KEY_JWT = "ABC123456";
 
-// Assets
-export const ASSETS = {
-  // LOGO: require('../assets/images/logo.png'),
+// Example Images
+export const IMAGES = {
+ LOGO: require("@/assets/images/logo.png")
 };

src/components/HelloWorld/index.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { render } from "react-dom";
-import './assets/styles/App.scss';
+import "@/themes/global.scss";
 import App from "./routes";
 
 render(<App />, document.getElementById("root"));

src/components/HelloWorld/style.scss

@@ -1,7 +1,7 @@
 import React from "react";
 import { HashRouter, Route, Switch } from "react-router-dom";
 
-import Home from "../screens/Home";
+import Home from "@/screens/Home";
 
 const App = () => (
  <HashRouter>

src/config/index.js

@@ -1,7 +1,8 @@
 import React, { Component } from "react";
 import "./style.scss";
 import { Layout, Menu, Breadcrumb } from "antd";
-import HelloWorld from "../../components/HelloWorld";
+import { IMAGES } from "@/config";
+import HelloWorld from "@/components/HelloWorld";
 
 const { Header, Content, Footer } = Layout;
 
@@ -35,6 +36,7 @@ class Home extends Component {
  <HelloWorld />
  </Content>
  <Footer style={{ textAlign: "center" }}>
+ <img className="logo-electron" src={IMAGES.LOGO} />
  electron-react-ant-boilerplate ©2019
  </Footer>
  </Layout>