Is it possible to develop my electron app while simultaneously testing and running it?

After scouring various resources, I was unable to find a solution to my unique situation. I am navigating the world of react, tailwind, typescript, electron, and parcel for the first time.

Getting this stack up and running smoothly has been quite a challenge due to my lack of experience. Currently, whenever I make changes to the code, I have to build and run it again to see the updates reflected. Is there a way to streamline this process in my package.json file? Are there any plugins or scripts available to automate this task?

This is how my package.json looks:

    {
  "name": "electron-typescript-starter",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Huy",
  "license": "BSD-2-Clause",
  "dependencies": {
    "@types/react": "^16.9.2",
    "@types/react-dom": "^16.8.5",
    "electron": "^6.0.2",
    "parcel-bundler": "^1.12.3",
     "react": "^16.9.0",
    "react-dom": "^16.9.0",
   "tailwindcss": "^1.1.2"
  },
  "scripts": {
    "dev": "parcel ./index.html",
    "app": "electron electron.js",
     "dist": "parcel build ./index.html",
    "watch": "parcel watch ./index.html --public-url ./ --target=electron-renderer"
  },
  "devDependencies": {
     "sass": "^1.22.10",
    "typescript": "^3.5.3"
  }
}
typescriptelectrontailwind-cssparceljs

Answer №1

Not sure if this is the most conventional method, but I found a solution by utilizing a tool called concurrently that enables running multiple commands within a single script.

"start": "concurrently \"parcel watch ./index.html --public-url ./ --target=electron-renderer\" \"electron electron.js\&\""

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with VS Code detecting inline JavaScript variables in an HTML file when referenced in a TypeScript file

In my index.html file, there is an inline script containing various variables... <body> <div id="load-form-here"></div> <script> let formID="abc123" let myBool = true let myArray = ["foo" ...

javascripthtmltypescriptvisual-studio-codeintellisense

Typescript Regular Expression Issue: filter function is not returning any matches

Currently, I am developing an Ecommerce API and working on a class specifically for search queries. My approach involves using regex and typescript with node.js. Although I have based my project on a JavaScript node project, I am encountering an issue wher ...

node.jstypescriptexpress

The type 'undefined' cannot be assigned to type 'Element or null'

One of the components I am using looks like this: const data: any[] = [] <Tiers data={data}/> This is how my component is structured: const Tiers = ({ data, }: { data?: any; }) => { console.log('data', data?.length!); ...

reactjstypescript

What is the best way to pass a specific property from a parent component to a child component in Angular when a button is clicked?

Hey there, I'm looking for a way to pass a single property (groupId) from a parent component to a child component. In this case, my child component is using ngx-bootstrap modal. Is there a solution available for this scenario? Essentially, I need to i ...

angulartypescriptangular8

Tips for incorporating external JavaScript files in your TypeScript project

When working with Angular JS, I often generate code through Typescript. There was a specific situation where I needed to include an external JS file in my typescript code and access the classes within it. The way I added the js file looked like this: /// ...

javascriptangularjstype-conversiontypescript

Using TypeORM: Incorporating sub queries with queryBuilder

I need assistance with converting the following PostgresSQL query into TypeORM's queryBuilder syntax: SELECT symbol, created_at FROM ( SELECT DISTINCT ON (symbol) symbol, created_at FROM update_history WHERE exchange = 'TEST' AND data_ ...

node.jstypescriptpostgresqltypeorm

Initialize the routed component following the retrieval of data in the main component

In my simple Angular app, each routed component relies on data fetched from an API right after the application loads. I decided that the best approach is to initiate fetching in the root component, which also contains the router outlet. However, the activa ...

javascriptangulartypescript

Type guards do not work properly on a union of enum types in TypeScript

Recently delved into the concept of Type Guards Chapter within the realm of Typescript However, I encountered an issue where my basic type guards failed to differentiate a union of enums. Why is this happening? enum A { COMMA = ',', PLUS = & ...

typescript

Troubleshooting the failure of the addEventListener mouseEvent in an Angular environment

Recently, I've been encountering an issue with adding addEventListener to dynamically created HTML canvas elements. Everything was working fine before, but now none of the events seem to be triggered. Below is the code snippet I am currently using: t ...

javascriptangulartypescript

Utilizing LocalStorage with Angular 6 BehaviorSubject

I'm struggling with retaining data after refreshing a page. My approach involves using a shared service to transfer data between unrelated components. Despite extensive research on LocalStorage implementation and usage, I have not been able to find a ...

angulartypescriptlocal-storagehttpclientbehaviorsubject

Tips for implementing a scroll event handler in React using TypeScript

On my web page, I have implemented lazy loading with a scroll listener. Within the scrollHandler function, I need to define the event type. const scrollHandler = (e: any) => { let scrollHeight = e.target.documentElement.scrollHeight; let ...

reactjstypescriptscroll

Optimal JWT signature verification within express.js using jsonwebtoken

The code I'm working with looks like this: import jwt from 'jsonwebtoken'; import { Request, Response } from 'express'; import { JWT_EXPIRY, JWT_SECRET } from '../../config'; interface UserParams { username: string, ...

node.jstypescriptexpressjwt

Create a TypeScript array of objects that mirrors a Java List<Map<String, String>>

In my Java function, the argument type is List<Map<String, String>>. To perform a fetch call from a TypeScript file, I need to declare a variable whose type corresponds to List<Map<String, String>>. As TypeScript does not have a bu ...

javatypescripttype-conversionfetch

Ways to obtain a referrer URL in Angular 4

Seeking a way to obtain the referrer URL in Angular 4. For instance, if my Angular website is example.com and it is visited from another PHP page like domaintwo.com/checkout.php, how can I detect the referring URL (domaintwo.com/checkout.php) on my Angul ...

javascriptangulartypescriptangularjs-directiveangular-ui-router

Utilizing Angular's FormGroup within a FormArray for a novel control structure

In my Angular application, I am working with a reactive form that contains a formArray of formGroups named sections: sectionForm = new FormGroup({ title: new FormControl<string>('New Section', {nonNullable: true, validators: ...

angulartypescriptangular-forms

Is there a way to include a query directly as a string in Drivine and Neo4j, instead of using a separate file?

My current setup involves utilizing Drivine in conjunction with Neo4j. In the provided example, there is a demonstration of injecting a query sourced from a separate file. I am curious to learn how I can directly inline a query as a string instead? ...

node.jstypescriptneo4jgraph-databasesdrivine

angular-bootstrap-mdindex.ts is not included in the compilation result

Upon deciding to incorporate Angular-Bootstrap into my project, I embarked on a quest to find a tutorial that would guide me through the download, installation, and setup process on my trusty Visual Studio Code. After some searching, I stumbled upon this h ...

javascriptnode.jsangulartypescript

The code is throwing an error stating: "TransformStream" is not a recognized name

I'm encountering an issue with my socket.io code. It previously built without any problems, but now I am unsure about what changes have caused the build to fail. It seems that TransformStream, a native node library, is having trouble loading in Typesc ...

node.jstypescriptsocket.io

Attempting to load a URL from local files in the React Monaco Editor

In my react-electron typescript application, I am utilizing Monaco Editor with the @monaco-editor/react package. However, when I include the line import Editor from '@monaco-editor/react'; and then incorporate the Editor component into React, I ...

node.jsreactjsnpmelectronmonaco-editor

What could be the reason behind a parcel command failing when executed from an npm shell script, but running smoothly when executed directly?

Here is the prod script I've used before on a similar project: #!/usr/bin/env sh GCC=$(npm bin)/google-closure-compiler preGccBuildSteps () { rimraf prod dist && mkdir prod && ln -sfn ../../css prod/css && \ spago ...

npmparceljs