Raja Osama
A Resident of the Javascript Rockstar world. I like to write about problems and their solution that I face in my life. I code because is I am good at it.
Image for post
Image for post

So you have created up a great looking Electron-based app. Now you want to create an installer for it, There is a lot of articles that can help you, but in this, I am going to share my story of how I did it, and it is also for the people who are using electron and react together.

Now you need to understand 2 things, there is no way of doing it the easy way, like there is no one-click installer creator in electron that you can use, that cover all the 100% of the cases for you, some will expose your app source, or you will end up have a gigantic size of package app and will end up having your whole project including node module in the app source code, that is not what I want.

So how we do it, 2 steps for each platform, and I am going to share my journey of windows and mac platform. First is step is making a package, and the second step will be making of an Installer. …


Learning Redux is quite complex, and implementing it over a scalable website is, so time becomes a nightmare.

It’s 2020, and for React state management, people usually go with either Redux or Context. Redux is usually being used for large applications, and Context API is mostly used for the smaller applications because of the structuring of the project.

Image for post
Image for post

I personally believe that state management is still a huge mess because no matter what you do, as your project Grows no matter what you used, it will become difficult to manage state and the project structure overall. …


A Foreground Service for React Native apps, with multiple headless tasks

Image for post
Image for post

Foreground service is a kind of service in Android that has a notification that can not be removed until the foreground service is closed, and because of this, you can run a background task with the help of headless JS.

Why can you need such kind of service?

A common use case will be when an app is tracking a user’s location. So with the help of the Headless.js and foreground service, you can keep track of the user’s location even he has killed his app from the recent tasks, of course, if permission is given.

How to Configure a foreground service within your app?

Do these steps carefully. 👇

1. You will need to add the permission in your manifest files to keep your app running in the background service

2. Now we need to define the name of the service, its description and the colour it is going to use, as well as we need to define the service and the headless task in here

So before the closing tag of applications, append this. …


The project need contributor, those who are willing to contribute and comment below

Image for post
Image for post

WOOSHOP was planned as a project for the portfolio, and I started this project almost 2 years ago, after I completed a project for my company called DFM which over react native, I wanted a project that I can show to the world since DFM project was more like an in-house app for the company and their members.

I got the inspiration when I was getting all these cool news about what is graphQL and how great it is. I was into it, I started learning graphQL over the internet and came across this plugin called WPGraphQL — A plugin created for WordPress and WordPress only. The sole purpose of this plugin was to able to access the WordPress data via GraphQL. And literally, they have these two addons plugins as well that one was to get the authentication through JWT and another was to the access to all the woo-commerce based content. …


Recently I created a Web browser-based on Javascript framework and library Electron and React.js Respectively and with Webpack. One of browser Requirement was to inject JS inside of the webview. A Javascript that runs inside of Website running inside webview.

Image for post
Image for post

Fortunately, this can be done by preload; a Preload is one of the parameters of Webview that let you inject Whole JS file inside of a webview rendered website. The file will then have access to all the internal browser API like window and document.

You can inject a preload file like 👇

Image for post
Image for post

There are a couple of things you need to know about the preload while working with dev environment you might easily pass the relative path. Still, at the time of production, you need to make sure that your preload file is accessible via File Protocol since preload only accept the path of File protocol, I had a similar issue with me react based browser, At the time of production, it was not able to get the path of preload file. …


Image for post
Image for post

👋, Imagine you have a proxy server, and you have been asked to create a VPN Extension, how would you do it? 😎I had to a similar task and I was asked to create a simple VPN server that will be used in our office staff, and after a bit of research I was able to create, what I hate the most is very lack of supporting help guides for the beginners over the internet, this is the reason why I decided to write my own guide on how you can make a simple chromium-based browser’s extension.

Let’s get started 🏃‍♀️, first you need to set up an extension boilerplate, you can even create one, all you need is an HTML, js and a manifest file. You can clone this repo https://github.com/MahbbRah/chrome_extension_boilerplate


Have you ever imagine how a browser works and how you can create a browser yourself and make it do almost everything you wanted to? Well, I am going to share my story of writing a browser from scratch with just knowledge of Javascript and electron and all the difficulties I faced in the process.

Image for post
Image for post

JavaScript

JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.

Electron

Electron is an open-source software framework developed and maintained by GitHub. It allows for the development of desktop GUI applications using web technologies: it combines the Chromium rendering engine and the Node.js …


Image for post
Image for post

Getting started with Electron and React is not easy stuff, that is the reason most people use some Starter or Boilerplate repo, and That is completely fine. But with React + Electron, most of these boilerplates are missing the configuration for setting up multiple windows routing with react.

I will be discussing how you can configure routing for a web pack based Electron and React boilerplate. I will be using basic-electron-boilerplate.

What is happening inside of this repo is whenever you will open up a new window to will open up the same react instance or if you want to call it same React page. …


Image for post
Image for post

So lately I have been working on an app, a Browser on Electron and one of the requirements was to change the proxy of the browser and every instance should originate from a single IP, in short, they wanted me to set up a custom IP for the webview.

After hours of research over google, I was able to solve the problem and was successfully changed the proxy of the browser. …

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store