nateshmbhat / electron-react-ts-starter Goto Github PK

View Code? Open in Web Editor NEW

112.0 2.0 15.0 2.75 MB

A solid :) boiler plate starter pack when starting an electron project which uses create-react-app with typescript.

Home Page: https://github.com/nateshmbhat/windows-terminal-tweaker

License: GNU General Public License v3.0

TypeScript 79.21% HTML 16.85% CSS 3.94%

electron-react-ts-starter's Introduction

electron-react-ts-starter

( Has Auto Reloading and Works with Create-React-App )

This is a boiler plate starter pack when starting an electron project which uses react with typescript. The code contains some bug fixes that are found when using react with electron and typescript and has auto monitoring of typescript changes to reload the electron app for faster development.

Why this electron-react-ts-starter :

Run electron app with create-react-app without ejecting.
Auto reloads the electron app when the typescript source file changes. (This is missing in a lot of tutorial articles which only have an electron.js file and not a electron.ts file )
Provides the required npm scripts and folder structure for simple to complex projects.
Includes a very simple bundling process.
Auto reloads app for changes in both main process files and react files.
With the provided folder structure , main and renderer process codebase can be maintained independently.

Usage :

Run the react project from the renderer directory :

cd renderer
npm install // First time only
npm run start

Run electron app's main process from main directory :

cd main
npm install // First time only
npm run start

To Build and Bundle :

Just make sure that you have added all the dependencies in the main/package.json to the renderer/package.json and the run the below command from the renderer folder.

cd renderer
npm run release // or npm run build

Sit back and have a cup of Coffee while the app gets built .

You will now have a full fledged application waiting for you in the dist folder.

Misc And Extra Options :

If your app uses React Router , make sure you use HashRouter instead of BrowserRouter .
In the renderer/package.json , use the build property to modify the settings for electron-builder. All assets and static files in your project should be present in the assets folder.
To get different installer types like 'msi' , 'appx' , '7z' , 'zip' etc , change the target property inside the build property in renderer/package.json .
If you have nested structure of typescript files in the main folder , make sure that you copy all the generated javascript .js files into the renderer/public/ folder before building the react app (This would add the javascript files in the public folder into the build folder when building our react-app).

Project built using this pack :

Windows Terminal Tweaker

electron-react-ts-starter's People

Contributors

Stargazers

Watchers

Forkers

colinterface warrickfitz pfftdammitchris horvay thomasdenneulin zookeemedia glennholland jberube yeoupooh flanker-tech yash14700 beingsane mauropedraza beon-tech alexrex

electron-react-ts-starter's Issues

Why is this project GPL licensed?

How can I add SASS and CSS Module support?

Hi there,
I tried adding SASS and CSS Module support following the CRA Documentation. It seems not working. Is there any other way you know to do so?

Thank you.

[deleted]

Broken build (instead of using relative path it seems to use absolute)

Hey there!
Got a small problem which is that after running yarn release, the application gets built properly but it doesn't work, it throws 404 errors (main.chunk.js, main.chunk.css, e.t.c.).

Tried extracting the app.asar and opening index.html in the browser but it's the same problem. It seems that all of the required files are interpreted as an absolute path instead of relative (e.g. ./static/test.js would be interpreted as /static/test.js).

The address it's trying to link is file:///static/css/main.5ecd60fb.chunk.css

Failed to load resource: net::ERR_FILE_NOT_FOUND
2.75f993d0.chunk.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
main.795d7f23.chunk.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
/favicon.ico:1 Failed to load resource: net::ERR_FILE_NOT_FOUND

Here is a screenshot of the unpacked asar.

EDIT: it basically tries linking

<script src="/static/js/2.75f993d0.chunk.js"></script> <!-- absolute -->`
<!-- instead of -->
<script src="./static/js/2.75f993d0.chunk.js"></script> <! -- relative -->>

Apparently it could be fixed by changing the webpack configuration but I'd like to resolve it without doing that as I'd have to eject it first.

Main Process files

More of a question than an Issue, sorry.

Why does the main process have both js and ts files, and how is this starter repo different than https://github.com/Robinfr/electron-react-typescript ? Are there problems there that you have solved?