How to remove the `Typescript` Feature?

[12343954]

you made a good scaffolding! thank you very much! but I don't wanna use Typescript，how can i remove it?

by the way，how can i add scss supporting in this scaffolding？

[codesbiome]

Hello @12343954 Good to know this project been helpful for you. 👍🏻

Using Javascript instead of Typescript

If you don't want to use Typescript in this project, you will need to convert all the source /src directory modules .tsx and .ts to the .jsx and .js

You will also need to modify Webpack Configuration files in /tools folder to use the correct file name with extension. For example :

Webpack Main Configuration

// tools/webpack/webpack.main.js

module.exports = {
  /**
   * This is the main entry point for your application, it's the first file
   * that runs in the main process.
   */
  entry: ['./src/main/app.ts'],  // 👈🏻 Change it to use correct entry module (javascript)

Forge Configuration

// tools/forge/forge.config.js

//....

entryPoints: [
{
  // Window process name
  name: 'app_window',
  // React Hot Module Replacement (HMR)
  rhmr: 'react-hot-loader/patch',
  // HTML index file template
  html: path.join(rootDir, 'src/renderer/app.html'),
  // Renderer
  js: path.join(rootDir, 'src/renderer/appRenderer.tsx'),  // 👈🏻 Change it to use correct entry module (javascript)
  // Main Window
  // Preload
  preload: {
    js: path.join(rootDir, 'src/renderer/appPreload.tsx'),  // 👈🏻 Change it to use correct entry module (javascript)
  },
},
],

Using SCSS/SASS stylesheet

Install following packages :

• node-sass
• sass-loader

yarn install -d sass-loader node-sass

Add New Webpack Rule for SASS/SCSS

// tools/webpack/webpack.rules.js

//....

{
    // SASS / SCSS Loader
    test: /\.(s(a|c)ss)$/,
    use: [
      { loader: 'style-loader' },
      { loader: 'css-loader' },
      { loader: 'sass-loader' },
    ],
}

[12343954]

@codesbiome thank you very much for reply！ I will try what you said！

here is my work under the typescript , and I'll try to make a javascript version soon. https://github.com/12343954/electron-react-webpack-typescript-2022-corona

[12343954]

@codesbiome , sorry, bro! i try my best to try your way, but i failed! i don‘t know which ones are dependencies of typescript or not ! when I deleted the tsconfig.json, a lot of errors broke out！

can you try to remove the typescript feature? thank you so much!

[codesbiome]

Hello @12343954

sorry, bro! i try my best to try your way, but i failed! i don‘t know which ones are dependencies of typescript or not ! can you try to remove the typescript feature?

In that case, can you please create a temporary repository based on this project and provide the url here so we could look into it?

when I deleted the tsconfig.json, a lot of errors broke out！

The tsconfig. json file specifies the root files and the compiler options required to compile the project. You can keep this file and still use only the JS modules.

Cheers!

[12343954]

thank you for reply！

I finished 99% of the javascript, just missed the menubar. there are some issue of import fs, path. I have tried many ways without success. can you help me to fix them? here is my code : https://github.com/12343954/electron-react-webpack-2022-corona

[codesbiome]

Hello @12343954

It seems like you're mixing two different Titlebar approaches for the Electron Window. Maybe try using only one approach, either custom-electron-titlebar or the default electron-window submodule from /misc/window directory

After removing all references from misc/window modules, following is the output of project;

there are some issue of import fs, path. I have tried many ways without success. can you help me to fix them?

Not seeing any errors regarding fs, path imports, as you've already enabled nodeIntegration for the BrowserWindow instance in app.js.

[12343954]

sorry, you can remove custom-electron-titlebar . and then click any menu, the error will show up in console.

[12343954]

comment line:16 in .\misc\window\components\WindowControls.jsx

// import context from '../titlebarContext.jsx';  

and run yarn start, the app can startup, but the menubar was not working.

you can update the code，i just commit the code to make the app start.

[codesbiome]

Hello @12343954

The modifications in that repo were a bit confusing to track down. Here is a new project repo for Javascript version of this boilerplate, you can give it a try and see if its useful for you.

Electron React Webpack Boilerplate (JavaScript)

[12343954]

it's awesome！that's what i want！ much appreciate！