Native apps with web technology (React + electron-webpack)

Native apps using react + electron webpack

If you are a web developer and built various web applications as hobby projects and real projects ? Then this article will help you go further beyond reaching online users.

In this i will help you take your web application outside web browsers like chrome and mozilla

Since chrome apps were deprecated we can use electron.

You can follow these simple steps to start a new desktop app with react and electron webpack also can be helpful to convert existing react application to desktop app

1. electron-webpack is a great place to refer the configuration of the app. But i will show the exact steps to get started below 👇

# create a directory of your choice, and copy template using curl
mkdir my-project && cd my-project
curl -fsSL https://github.com/electron-userland/electron-webpack-quick-start/archive/master.tar.gz | tar -xz --strip-components 1

# or copy template using git clone
git clone https://github.com/electron-userland/electron-webpack-quick-start.git
cd electron-webpack-quick-start
rm -rf .git

# install dependencies
yarn

2. Now add react preset

yarn add @babel/preset-react --dev

3. Now change the file name in the render folder to index.jsx and add below code

//renderer/index.tsx
import React from 'react'
import ReactDom from 'react-dom'
const Root :React.FC = ()=>{
return(
  <div>
      <h1 className="heading">hello</h1>
      <style>{`
           .heading{
               color:red;
           }
      `}</style>
  </div>
)
}
ReactDom.render(
<Root/>,
document.getElementById("app"),
)

4. you will face the error as webpack cannot complile JSX so create a tsconfig and add the below code

//tsconfig.json
{
    "compilerOptions": {
       "jsx": "react"
    },
}

5. Now try to run the application using the below command

npm run dev

6. now the application uses react and you can develop a complete application using this setup.