Cleanup and documentation (#24)

* update dependencies

* react function comps and ts webpack

* refactor structure

* fix hot reload and cleanup

* improve font bundling

* typescript paths

* clean up

* clean up

* fix router not working in file protocol

* fix fs error in main-process

* fix require not defined in render process

* fix dialogs using electron remote

* fix dialog with electron remote

* cleanup

* add package.json to bundle

* cleanup

* update documentation

* cleanup and documentation

Co-authored-by: Marcelo Augusto <[email protected]>

Author: marceloaugusto80

readme.md

@@ -2,7 +2,7 @@
 ![](./.github/project-logo-400.jpg) 
 
 
-#### Template project for desktop apps using:
+#### Slim template for desktop apps using:
 - [Electron](https://electronjs.org/)
 - [Typescript](https://www.typescriptlang.org/)
 - [React](https://reactjs.org/)
@@ -14,20 +14,30 @@
 <br>
 
 # Before anything
-As always, install packages:
+As always, install packages.
+Open a terminal in the project root folder and run:
 ```cmd
 $ npm install
 ```
 
 
 # During development
 
+### Start the app in **development** mode (**with** hot reload).
 Run:
 ```cmd
 $ npm start
 ```
 It will launch webpack dev server and electron [concurrently](https://www.npmjs.com/package/concurrently).
 It has [fast refresh](https://www.npmjs.com/package/react-refresh-webpack-plugin) (AKA hot-reload) enabled by default.
+<br/>
+<br/>
+<br/>
+### Start app in **production** mode (**without** hot reload).
+Run:
+```cmd
+$ npm run start:prod
+```
 
 # Testing
 Run:
@@ -41,5 +51,5 @@ Just run:
 ```cmd
 $ npm run pack
 ```
-and the output will be in the ```./pack``` folder.
+and the output will available in the ```./pack``` folder.
 

src/main/main-process.ts

@@ -38,14 +38,12 @@ app.whenReady()
         initialize();
 
         win.maximize();
-        enable(win?.webContents);
-
+        enable(win.webContents);
 
         win.on("closed", () => {
             win = null;
         });
 
-
         app.on('window-all-closed', () => {
             if (process.platform != "darwin") {
                 app.quit()

src/renderer/styles/GlobalStyle.tsx

@@ -9,7 +9,6 @@ export const GlobalStyle = createGlobalStyle`
         margin: 0 !important;
         padding: 0 !important;
         font-family: Roboto;
-        font-weight: 600;
     }
 
     a {

src/renderer/views/ExampleView1.tsx

@@ -18,8 +18,11 @@ export function ExampleView1() {
     return (
         <div>
             <h1>Example view 1</h1>
+            <h3>Just a example view</h3>
+            <p>An image:</p>
             <img src={clock} />
-            <p>{theNumber}</p>
+            <p>A counter:</p>
+            <p><strong>{theNumber}</strong></p>
         </div>
     );
 

src/renderer/views/ExampleView2.tsx

@@ -26,7 +26,8 @@ export function ExampleView2() {
     return (
         <div>
             <h1>Example view 2</h1>
-            <p>Try to open a file</p>
+            <h3>Another example view.</h3>
+            <p>Try to open a file to test electron dialog and file system:</p>
             <button onClick={handleOpenFileClick}>Open file...</button>
             {
                 text &&

src/shared/readme.txt

@@ -1,2 +1,2 @@
-put scripts used by both renderer and main process here.
+put scripts and modules used by both renderer and main process here.
 import then like: import {something} from "@/shared/something";

webpack.config.ts

@@ -120,10 +120,6 @@ function RendererConfiguration(env: Env): Configuration {
             electronRenderer: true
         },
 
-        mode: env.development ? "development" : "production",
-
-        devtool: env.development ? "source-map" : undefined,
-
         entry: {
             "renderer-process": "./renderer-process.tsx"
         },