{"id":22155721,"url":"https://github.com/bridgeconn/tc-create-offline","last_synced_at":"2025-03-24T14:25:07.066Z","repository":{"id":221676533,"uuid":"753982671","full_name":"Bridgeconn/tc-create-offline","owner":"Bridgeconn","description":null,"archived":false,"fork":false,"pushed_at":"2024-04-22T13:04:44.000Z","size":71400,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-29T19:22:01.467Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Bridgeconn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-02-07T06:54:48.000Z","updated_at":"2024-04-03T12:40:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"ef0560fa-ffc6-4c98-869b-cd351e94f41a","html_url":"https://github.com/Bridgeconn/tc-create-offline","commit_stats":null,"previous_names":["bridgeconn/tc-create-offline-poc","bridgeconn/tc-create-offline"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bridgeconn%2Ftc-create-offline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bridgeconn%2Ftc-create-offline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bridgeconn%2Ftc-create-offline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bridgeconn%2Ftc-create-offline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Bridgeconn","download_url":"https://codeload.github.com/Bridgeconn/tc-create-offline/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245286538,"owners_count":20590624,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-02T02:19:37.603Z","updated_at":"2025-03-24T14:25:07.042Z","avatar_url":"https://github.com/Bridgeconn.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tc-create-offline-poc\n\n## how to set up electronite with Reactjs\n\n## create folder and run npm init in order to create the package.json\n\nnpm commands :\n```\nmkdir tc-create-offline-poc \u0026\u0026 cd tc-create-offline-poc\nnpm init\n```\n\nfill details  and your package.json file should look something like this:\n\n```\n{\n  \"name\": \"my-electron-app\",\n  \"version\": \"1.0.0\",\n  \"description\": \"Hello World!\",\n  \"main\": \"main.js\",\n  \"author\": \"Jane Doe\",\n  \"license\": \"MIT\"\n}\n```\n\n\n## install electronite\n\n```\nnpm i electronite\n```\n\n## Usage\nIn your package.json\n\n```\n{\n    \"scripts\": {\n        \"start\": \"electronite .\"\n    }\n}\n\n```\n\n//\nIn your javascript\n```\nconst {...} = require(\"electronite\");\n```\n### need to create main.js and index.html\n\nmain.js\n```\n// Main Process\nconst { app, BrowserWindow } = require('electronite');\n\nfunction createWindow() {\n  // Browser Window \u003c- Renderer Process\n  const win = new BrowserWindow({\n    width: 1200,\n    height: 800,\n    backgroundColor: \"white\",\n    webPreferences: {\n      nodeIntegration: true\n    }\n  })\n\n  win.loadFile('index.html')\n  win.webContents.openDevTools();\n}\n\napp.whenReady().then(createWindow);\n\napp.on('window-all-closed', () =\u003e {\n  if (process.platform !== 'darwin') {\n    app.quit();\n  }\n})\n\napp.on('activate', () =\u003e {\n  if (BrowserWindow.getAllWindows().length === 0) {\n    createWindow();\n  }\n})\n```\n\nindex.html\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta http-equiv=\"Content-Security-Policy\" content=\"script-src 'self'\" /\u003e\n    \u003ctitle\u003eElectron App\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ch1\u003eHello World\u003c/h1\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\n\n## Now Adding React to the existing Electron App\n```\nnpm install --save react react-dom\n```\n\nnow insert a folder js inside the src and add index.js for bootstrapping the react\nfor index.js\n```\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport App from './App.js';\n\n\nconst root =  createRoot(document.getElementById('container'));\nroot.render(\u003ch1\u003eHello React\u003c/h1\u003e);\n```\nand in the index.html there should be a div with an Id 'container' inside which the above h1 wil be rendered.\n\n```\n\u003cdiv id='container'\u003e\u003c/div\u003e\n```\n```\n\u003cscript src='./src/js/index.js'\u003e\u003c/script\u003e\n```\n\n\nnow as import won’t work as electron does’nt understands it,so we need to  recompile our code which will be understood by the electron. For this we need install few packages\n\n```\nnpm install --save @babel/preset-env @babel/preset-react babel-loader css-loader sass sass-loader style-loader webpack webpack-cli @babel/core\n```\n\nwebpack.common.js\n```\nconst path = require('path');\n\nmodule.exports = {\n  mode: 'development',\n  entry: './src/js/index.js',\n  // TODO: Explain Source Map\n  devtool: 'inline-source-map',\n  target: 'electron-renderer',\n  module: {\n    rules: [\n      {\n        test: /\\.js$/,\n        exclude: /node_modules/,\n        use: {\n          loader: 'babel-loader',\n          options: {\n            presets: [[\n              '@babel/preset-env', {\n                targets: {\n                  esmodules: true\n                }\n              }],\n              '@babel/preset-react']\n          }\n        }\n      },\n      {\n        test: [/\\.s[ac]ss$/i, /\\.css$/i],\n        use: [\n          // Creates `style` nodes from JS strings\n          'style-loader',\n          // Translates CSS into CommonJS\n          'css-loader',\n          // Compiles Sass to CSS\n          'sass-loader',\n        ],\n      }\n    ]\n  },\n  plugins: [],\n  resolve: {\n    extensions: ['.js'],\n  },\n  output: {\n    filename: 'app.js',\n    path: path.resolve(__dirname, 'build', 'js'),\n  },\n};\n\n```\n\nSet watch script for compiling and watching changes in our files\n(it’s placed below the “start” script in package.json)\n```\n\"watch\": \"webpack --config webpack.common.js --watch\"\n```\n\nrestart the app if it’s running\n\nchange the script src in index.html\n\nfrom : \n```\n\u003cscript src='./src/js/index.js'\u003e\u003c/script\u003e\n```\nto: \n```\n\u003cscript src='./build/js/app.js'\u003e\u003c/script\u003e\n```\nwhy ?\nbecause of output of build file is in (it's mentioned in webpack.common.js)\n```\n  output: {\n    filename: 'app.js',\n    path: path.resolve(__dirname, 'build', 'js'),\n  },\n\n```\nwhich means output path is './build/js/app.js'\n\n------\n\n## Now for automatic reload to happen \n we need to install a package\n```\nnpm install –save-dev electron-reload\n```\n\n(update) main.js\n```javascript\n// Main Process\nconst { app, BrowserWindow } = require('electronite');\n//adding the following for reload\nconst path = require('path');\nconst isDev = !app.isPackaged;\n//\nfunction createWindow() {\n  // Browser Window \u003c- Renderer Process\n  const win = new BrowserWindow({\n    width: 1200,\n    height: 800,\n    backgroundColor: \"white\",\n    webPreferences: {\n      nodeIntegration: false,\n      // will sanitize JS code\n      // TODO: explain when React application is initialize\n      worldSafeExecuteJavaScript: true,\n      // is a feature that ensures that both, your preload scripts and Electron\n      // internal logic run in sparate context\n      contextIsolation: true\n    }\n  })\n\n  win.loadFile('index.html')\n  //adding the isDev condition for the dev Tools\n  isDev \u0026\u0026 win.webContents.openDevTools();\n}\n//adding the following for reload\nif (isDev) {\n  require('electron-reload')(__dirname, {\n    electron: path.join(__dirname, 'node_modules', '.bin', 'electronite')\n  })\n}\n//\napp.whenReady().then(createWindow);\n\napp.on('window-all-closed', () =\u003e {\n  if (process.platform !== 'darwin') {\n    app.quit();\n  }\n})\n\napp.on('activate', () =\u003e {\n  if (BrowserWindow.getAllWindows().length === 0) {\n    createWindow();\n  }\n})\n\n// Chromium -\u003e web eingine for rendering the UI, full Chrome-like web browser\n// V8 -\u003e engine that provides capabilities to execute, run, JS code in the browser\n// Node JS(V8) -\u003e we are able to run JS code + provides more features\n\n// Webpack -\u003e is a module builder, main purpose is to bundle JS files for usage in the browsert\n// Babel -\u003e js a JS compiler\n```\n\n\n### Others\ncreate a App.js file inside src folder\n```\nimport React from \"react\";\n\nReact\nconst App = () =\u003e {\n    return ( \n        \u003cdiv\u003e\n            \u003ch1\u003etC create Offline app\u003c/h1\u003e\n        \u003c/div\u003e\n     );\n}\n \nexport default App;\n```\n### install npm package\n```\nnpm install --legacy-peer-deps\n```\n\n### to run the app\nIn one terminal run below code\n```\nnpm run watch\n```\nOpen new terminal and run \n```\nnpm start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbridgeconn%2Ftc-create-offline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbridgeconn%2Ftc-create-offline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbridgeconn%2Ftc-create-offline/lists"}