ReTypeTron

lukasbach · Sep 9, 2020 · d0023ba · d0023ba
commit d0023ba
Show file tree

Hide file tree

Showing 15 changed files with 6,516 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,27 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = space
+insert_final_newline = false
+max_line_length = 120
+tab_width = 4
+
+[*.sass]
+indent_size = 2
+
+[*.scss]
+indent_size = 2
+
+[{*.ats,*.ts,getEmptyStatement}]
+indent_size = 2
+tab_width = 2
+
+[{*.cjs,*.js}]
+indent_size = 2
+tab_width = 2
+
+[{*.har,*.jsb2,*.jsb3,*.json,.babelrc,.eslintrc,.stylelintrc,bowerrc,jest.config}]
+indent_size = 2
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+.idea
+node_modules
+app
+out
+yarn-error.log
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,2 @@
+app
+out
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "bracketSpacing": true,
+  "printWidth": 120,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "arrowParens": "avoid",
+  "endOfLine": "lf",
+  "trailingComma": "es5"
+}
diff --git a/electron-builder.json b/electron-builder.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "http://json.schemastore.org/electron-builder",
+  "appId": "com.retypetron.starter",
+  "productName": "Retypetron Starter",
+  "copyright": "Copyright (c) 2020 ${author}",
+  "files": ["app/**/*", "node_modules/", "index.html"],
+  "directories": {
+    "output": "./out",
+    "buildResources": "./resources"
+  },
+  "win": {
+    "target": ["nsis", "msi", "zip"]
+  },
+  "linux": {
+    "target": ["snap", "deb", "tar.gz"]
+  },
+  "mac": {
+    "target": ["dmg", "zip"]
+  }
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,10 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ReTypeTron App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "retypetron-starter",
+  "version": "1.0.0",
+  "description": "Minimalistic React + TypeScript + Electron Boilerplate. Nothing more.",
+  "main": "app/electron-main.js",
+  "scripts": {
+    "build:renderer:prod": "cross-env NODE_ENV=production webpack --config webpack-renderer.config.ts --mode production",
+    "start:renderer:dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack-renderer.config.ts --mode development",
+    "build:electron-main:dev": "cross-env NODE_ENV=development webpack --config webpack-electron.config.ts --mode development",
+    "build:electron-main:prod": "cross-env NODE_ENV=production webpack --config webpack-electron.config.ts --mode production",
+    "build:app": "yarn build:renderer:prod && yarn build:electron-main:prod",
+    "build:unpacked": "electron-builder --dir",
+    "build:packed": "electron-builder",
+    "build": "yarn build:app && yarn build:packed",
+    "start:run-electron": "cross-env NODE_ENV=development electron ./app/electron-main.js",
+    "start": "yarn build:electron-main:dev && concurrently \"yarn start:renderer:dev\" \"yarn start:run-electron\" -n renderer,electron",
+    "cleanup": "rimraf app/* && rimraf out/*",
+    "prettier:check": "prettier --check .",
+    "prettier:write": "prettier --write .",
+    "prepublish": "yarn cleanup && yarn build"
+  },
+  "author": "Lukas Bach",
+  "license": "ISC",
+  "dependencies": {
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "devDependencies": {
+    "@types/node": "^14.6.4",
+    "@types/react": "^16.9.49",
+    "@types/react-dom": "^16.9.8",
+    "@types/webpack": "^4.41.22",
+    "@types/webpack-dev-server": "^3.11.0",
+    "concurrently": "^5.3.0",
+    "cross-env": "^7.0.2",
+    "electron": "^10.1.1",
+    "electron-builder": "^22.8.0",
+    "html-webpack-plugin": "^4.4.1",
+    "nodemon": "^2.0.4",
+    "prettier": "^2.1.1",
+    "ts-loader": "^8.0.3",
+    "ts-node": "^9.0.0",
+    "typescript": "^4.0.2",
+    "webpack": "^4.44.1",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
+  }
+}
diff --git a/readme.md b/readme.md
@@ -0,0 +1,64 @@
+# ReTypeTron
+
+> Minimalistic React + TypeScript + Electron Boilerplate. Nothing more.
+
+Uses a minimal webpack config to bundle everything together, and includes
+just what you need to build your electron app. Tiny enough so that you keep
+a good overview of everything, simple enough for you to add what you need
+and still complete enough to start working on production projects.
+
+Features:
+
+- Completely typed, not only your application code, but also the electron
+  main process code, the webpack configuration files (editor suggestions
+  in those files make extensions really easy!), and in json configuration
+  files via json schemas.
+- No built-in frontend libraries like `react-router` or `redux`. They
+  are dead-simple to integrate manually, this boilerplate does not make
+  assumptions about your tech stack.
+- `electron-builder` included for bundling the app for Windows, Linux
+  and Mac. Easily adjustable configurations allows bundling installers or
+  zipped portable packages.
+- `prettier` included for formatting.
+
+## Removing stuff
+
+Utilities like `electron-builder` and `prettier` are included for
+convenience, but can easily be removed if you don't want them.
+
+### Removing `electron-builder`
+
+- Remove the fields `build:unpacked`, `build:packed`, `build` from
+  `package.json:scripts`.
+- Remove the dependency `electron-builder`.
+- Remove the file `electron-builder.json`.
+
+### Removing `prettier`
+
+- Remove the fields `prettier:check` and `prettier:write` from
+  `package.json:scripts`
+- Remove the dependency `prettier`.
+- Remove the file `prettierrc.json`.
+
+## FAQ
+
+- Where does the code land once built?
+  - The built files `index.html`, `electron-main.js` and
+    `js/main.js` (render logic) are placed in the `app/`
+    folder, which is loaded into the root of the
+    `resources/app.asar` archive once built into an
+    distributable package.
+- How can I access the location of the built code?
+  - e.g. `path.join(app.getAppPath(), '/app/index.html')`
+- How can I add other files to be included into that archive?
+  - Add the file paths as glob to the `files`-array in
+    `electron-builder.json`.
+- How can I import images/css/scss/other custom things in
+  TypeScript?
+  - Add the relevant loaders in `webpack-renderer.config.ts`
+    if you want to load those files in the render process, or
+    in `webpack-electron.config.ts` for the main process.
+- How can I change the icon?
+  - `resources/icon.png`
+- I want a more comprehensive boilerplate that includes more features.
+  - Look into https://github.com/electron-react-boilerplate/electron-react-boilerplate
diff --git a/resources/icon.png b/resources/icon.png
diff --git a/src/electron-main.ts b/src/electron-main.ts
@@ -0,0 +1,39 @@
+import { app, BrowserWindow } from 'electron';
+import * as path from 'path';
+import * as url from 'url';
+import * as fs from 'fs';
+
+console.log('process.env.NODE_ENV=', process.env.NODE_ENV);
+console.log('app.getAppPath()=', app.getAppPath());
+console.log(fs.readdirSync(path.join(app.getAppPath(), '/app/')));
+
+app.on('ready', () => {
+  let mainWindow: Electron.BrowserWindow | null = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      nodeIntegration: true,
+      webSecurity: false,
+      worldSafeExecuteJavaScript: true,
+    },
+  });
+
+  if (process.env.NODE_ENV === 'development') {
+    mainWindow.loadURL(`http://localhost:4000`);
+    // mainWindow.webContents.openDevTools();
+  } else {
+    mainWindow.loadURL(
+      url.format({
+        pathname: path.join(app.getAppPath(), '/app/index.html'),
+        protocol: 'file:',
+        slashes: true,
+      })
+    );
+  }
+
+  mainWindow.on('closed', () => {
+    mainWindow = null;
+  });
+});
+
+app.allowRendererProcessReuse = true;
diff --git a/src/index.tsx b/src/index.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+console.log('process.env.NODE_ENV=', process.env.NODE_ENV);
+const a = () => {};
+ReactDOM.render(
+  <div>
+    <h1>All your bases are belong to us</h1>
+  </div>,
+  document.getElementById('root')
+);
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "outDir": "dist"
+  },
+  "include": ["src"]
+}
diff --git a/webpack-electron.config.ts b/webpack-electron.config.ts
@@ -0,0 +1,28 @@
+import * as path from 'path';
+import * as webpack from 'webpack';
+
+const config: webpack.Configuration = {
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+    mainFields: ['main', 'module'],
+  },
+  entry: './src/electron-main.ts',
+  target: 'electron-main',
+  devtool: 'source-map',
+  module: {
+    rules: [
+      {
+        test: /\.(js|ts|tsx)$/,
+        exclude: /node_modules/,
+        use: 'ts-loader',
+      },
+    ],
+  },
+  output: {
+    path: path.resolve(__dirname, 'app'),
+    filename: 'electron-main.js',
+    publicPath: './',
+  },
+};
+
+export default config;
diff --git a/webpack-renderer.config.ts b/webpack-renderer.config.ts
@@ -0,0 +1,43 @@
+import * as path from 'path';
+import * as webpack from 'webpack';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+
+const config: webpack.Configuration = {
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+    mainFields: ['main', 'module', 'browser'],
+  },
+  entry: './src/index.tsx',
+  target: 'electron-renderer',
+  devtool: 'source-map',
+  module: {
+    rules: [
+      {
+        test: /\.(js|ts|tsx)$/,
+        exclude: /node_modules/,
+        use: 'ts-loader',
+      },
+    ],
+  },
+  devServer: {
+    contentBase: path.join(__dirname, 'app'),
+    historyApiFallback: true,
+    compress: true,
+    hot: true,
+    port: 4000,
+    publicPath: '/',
+  },
+  output: {
+    path: path.resolve(__dirname, 'app'),
+    filename: 'js/[name].js',
+    publicPath: './',
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      filename: './index.html',
+      template: './index.html',
+    }),
+  ],
+};
+
+export default config;