Commit 46d33e58 authored by Flavio Santos's avatar Flavio Santos

🎉 Initial commit

parents
Pipeline #61 failed with stages
.git/
build/
dist/
node_modules/
.env
build/
dist/
node_modules/
.env
FROM electronuserland/builder:wine
WORKDIR /project
COPY package.json yarn.lock ./
RUN NODE_ENV=development yarn install
COPY . .
RUN yarn build
CMD [ "yarn", "dist" ]
import { Menu, BrowserWindow } from "electron";
export const createMenu = (
win: BrowserWindow | null,
props: Electron.ContextMenuParams
) =>
Menu.buildFromTemplate([
{
label: "Back",
click: () => {
if (win) {
win.webContents.goBack();
}
},
accelerator: "Alt+Left",
enabled: (win && win.webContents.canGoBack()) || false,
},
{
label: "Forward",
click: () => {
if (win) {
win.webContents.goForward();
}
},
accelerator: "Alt+Left",
enabled: (win && win.webContents.canGoForward()) || false,
},
{ type: "separator" },
{ label: "Reload", role: "reload", accelerator: "CommandOrControl+R" },
{ type: "separator" },
{
label: "Inspect",
click: () => {
if (win) {
win.webContents.inspectElement(props.x, props.y);
}
},
accelerator: "Shift+CommandOrControl+I",
},
]);
export const createHighlightMenu = (
win: BrowserWindow | null,
props: Electron.ContextMenuParams
) =>
Menu.buildFromTemplate([
{
label: "Copy",
role: "copy",
accelerator: "CommandOrControl+C",
enabled: props.editFlags.canCopy,
},
{ type: "separator" },
{
label: "Inspect",
click: () => {
if (win) {
win.webContents.inspectElement(props.x, props.y);
}
},
accelerator: "Shift+CommandOrControl+I",
},
]);
import { app, BrowserWindow } from "electron";
import path from "path";
import { createHighlightMenu, createMenu } from "./functions/menu";
const WINDOW_INITIAL_WIDTH = 1080;
const WINDOW_INITIAL_HEIGHT = 720;
let mainWindow: BrowserWindow | null = null;
const createWindow = () => {
mainWindow = new BrowserWindow({
width: WINDOW_INITIAL_WIDTH,
height: WINDOW_INITIAL_HEIGHT,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
},
show: false,
});
const url =
process.env.NODE_ENV !== "development"
? `file://${path.join(__dirname, "..", "renderer", "index.html")}`
: "http://localhost:8080";
mainWindow.loadURL(url);
mainWindow.on("closed", () => {
mainWindow = null;
});
mainWindow.once("ready-to-show", () => {
if (mainWindow) {
mainWindow.show();
}
});
mainWindow.webContents.on("context-menu", (_, props) => {
const contextMenu = props.selectionText
? createHighlightMenu(mainWindow, props)
: createMenu(mainWindow, props);
contextMenu.popup();
});
};
app.on("ready", () => {
createWindow();
});
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", () => {
if (mainWindow === null) {
createWindow();
}
});
{
"compilerOptions": {
"target": "ESNext",
"module": "CommonJS",
"strict": true,
"removeComments": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"forceConsistentCasingInFileNames": true,
"esModuleInterop": true
},
"exclude": ["./node_modules"]
}
const webpack = require("webpack");
const path = require("path");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const dotenv = require("dotenv-safe");
const { required } = dotenv.config();
/**
* @type {webpack.Configuration}
*/
const config = {
entry: path.join(__dirname, "index.ts"),
output: {
path: path.join(__dirname, "..", "..", "build", "main"),
filename: "index.js",
publicPath: "/",
},
target: "electron-main",
node: {
__dirname: false,
},
resolve: {
extensions: [".ts", ".js"],
},
performance: false,
module: {
rules: [
{
test: /\.ts$/,
use: {
loader: "babel-loader",
options: {
babelrc: false,
presets: ["@babel/preset-typescript"],
},
},
exclude: /node_modules/,
},
],
},
plugins: [
new ForkTsCheckerWebpackPlugin({
typescript: { configFile: path.join(__dirname, "tsconfig.json") },
}),
new webpack.EnvironmentPlugin(required),
],
};
module.exports = config;
import React from "react";
import GlobalStyle from "../renderer/styles/global";
import Title from "./components/Title";
const App: React.FC = () => (
<>
<GlobalStyle />
<Title />
</>
);
export default App;
import React from "react";
import { TitleContainer } from "../styles/components/Title";
const Title: React.FC = () => (
<TitleContainer>
<h1>Hello World!</h1>
</TitleContainer>
);
export default Title;
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.querySelector("app"));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<app></app>
</body>
</html>
import styled from "styled-components";
export const TitleContainer = styled.div`
color: #4287f5;
`;
import { createGlobalStyle } from "styled-components";
const GlobalStyle = createGlobalStyle`
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
`;
export default GlobalStyle;
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"strict": true,
"removeComments": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"forceConsistentCasingInFileNames": true,
"esModuleInterop": true,
"jsx": "react"
},
"exclude": ["./node_modules"]
}
const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const dotenv = require("dotenv-safe");
const { required } = dotenv.config();
const isDevelopment = process.env.NODE_ENV === "development";
/**
* @type {webpack.Configuration}
*/
const config = {
entry: path.join(__dirname, "index.tsx"),
output: {
path: path.join(__dirname, "..", "..", "build", "renderer"),
filename: "bundle.js",
},
target: "electron-renderer",
devtool: isDevelopment ? "eval-source-map" : "source-map",
performance: false,
resolve: {
extensions: [".tsx", ".ts", ".js"],
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
babelrc: false,
presets: ["@babel/preset-typescript", "@babel/preset-react"],
plugins: [isDevelopment && "react-refresh/babel"].filter(Boolean),
},
},
},
],
},
plugins: [
isDevelopment && new webpack.HotModuleReplacementPlugin(),
isDevelopment && new ReactRefreshWebpackPlugin(),
new ForkTsCheckerWebpackPlugin({
typescript: { configFile: path.join(__dirname, "tsconfig.json") },
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, "public", "index.html"),
favicon: path.join(__dirname, "public", "favicon.ico"),
}),
new webpack.EnvironmentPlugin(required),
].filter(Boolean),
devServer: {
historyApiFallback: true,
port: 8080,
},
};
module.exports = config;
version: "3"
services:
electron-builder:
build: .
volumes:
- ./dist:/project/dist
files: "./build/**/*"
appId: "com.electron-react-typescript-starter-app"
linux:
category: Utility
target: AppImage
mac:
category: public.app-category.utilities
target: mas
win:
target: nsis
{
"name": "electron-react-typescript-starter-2",
"version": "1.0.0",
"main": "build/main/index.js",
"author": "Eliseu Videira <eliseuvideira1@gmail.com>",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.13.14",
"@babel/preset-react": "^7.13.13",
"@babel/preset-typescript": "^7.13.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
"@types/node": "^14.14.37",
"@types/react": "^17.0.3",
"@types/styled-components": "^5.1.9",
"@types/webpack": "^5.28.0",
"babel-loader": "^8.2.2",
"concurrently": "^6.0.1",
"electron": "^12.0.2",
"electron-builder": "22.8",
"fork-ts-checker-webpack-plugin": "^6.2.0",
"html-webpack-plugin": "^5.3.1",
"react-refresh": "^0.10.0",
"webpack": "^5.31.0",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"@types/react-dom": "^17.0.3",
"cross-env": "^7.0.3",
"dotenv": "^8.2.0",
"dotenv-safe": "^8.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-is": "^17.0.2",
"styled-components": "^5.2.3",
"typescript": "^4.2.4"
},
"scripts": {
"build": "yarn build-main && yarn build-renderer",
"build-main": "cross-env NODE_ENV=production webpack --mode production --config ./app/main/webpack.config.js",
"build-renderer": "cross-env NODE_ENV=production webpack --mode production --config ./app/renderer/webpack.config.js",
"dev": "concurrently \"yarn dev-main\" \"yarn dev-renderer\"",
"dev-main": "cross-env NODE_ENV=development webpack --mode development --config ./app/main/webpack.config.js --watch",
"dev-renderer": "cross-env NODE_ENV=development webpack serve --mode development --config ./app/renderer/webpack.config.js --hot",
"dist": "yarn build && electron-builder -w --dir && electron-builder -w",
"start": "electron ."
}
}
This diff is collapsed.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment