I'm fairly new to VSCode, and am building an HTML5 app with Electron. I find it annoying to have to switch windows and enter a command every time I want to test my application, and was wondering if there's a way to set up VSCode to run my Electron app by pushing the run button.
My file layout is as follows:
Project Directory
|
| -- index.js
| -- src
|
| -- index.html
| -- script.js
The project directory is where the electron . command is typically run, and I'll be mostly working inside the src directory while in VSCode. Does anybody know how this can be configured?
You can create a new run configuration in VSCode by selecting Run > Add configuration and select Node.js (or any template, you'll overwrite it anyway)
(Do this from the src directory, because that's where you're working most)
Put the this in the launch.json file it creates:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Run Electron app",
"cwd": "${workspaceFolder}/..",
"runtimeExecutable": "electron",
"args": [
"."
]
}
]
}
This creates a launch configuration that will run electron . when you press the run button. Note the "cwd": "${workspaceFolder}/.." which runs the command one directory up so it's in your root project directory.
Have you made sure the Electron app has a main script defined in its package.json.
The main script should be set to the path of the main JavaScript file that runs your Electron app
package.json:
{
"name": "my-electron-app",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"dependencies": {
"electron": "^10.1.0"
}
}
Related
I have a nodemon server running, but if I change a file with fs.writeFileSync nodemon restarts and the json-file loses its data.
I tried to prevent this by putting a ignore in the package.json
"nodemonConfig": {
"ignore": ["*.json"]
}
This is not working. I think it could be because I installed nodemon global. Then I found another possibility to prevent this by creating a nodemon.json with:
{
"ignore": ["*.json"]
}
but this is also not working. The third possibility was to write:
nodemon --ignore '[users.json]'
in the terminal. It could be that I wrote the line wrong or something else, but I am just not getting the solution for this problem.
You can add nodemon configuration within the package.json file, for example:
{
"name": "label",
"version": "0.0.1",
"nodemonConfig": {
"ignore": ["*.json", "public/javascripts/*.js"]
},
"author": "#aqui",
"license": "GPL-3.0"
}
The key must be nodemonConfig. Ignore rules can be specified as an array of globs or complete filenames
Or you can edit your package.json file to update the run scripts this way.
"scripts": {
"dev": "nodemon server.js --ignore *.json"
},
i had installed parcel with version number "parcel": "^2.0.0-rc.0" and json i mentioned like this
when i try to run the command npm start i am error like this
i want to call index.html page but it is showing like File extension must be .js, .mjs, or .cjs
How can i solve this issue ?
"name": "receipe-book",
"version": "1.0.0",
"description": "you can get your favourite receipe here",
"main": "index.html",
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
},
"author": "Somu Nelavalli",
"license": "ISC",
"dependencies": {
"parcel": "^2.0.0-rc.0"
}```
Server running at http://localhost:1234
× Build failed.
#parcel/core: Unexpected output file type .html in target "main"
H:\Somu Pracatice\Javascript\complete-javascript-course-master\complete-javascript-course-master\18-forkify\starter\package.json:5:11
4 | "description": "you can get your favourite receipe here",
> 5 | "main": "index.html",
> | ^^^^^^^^^^^^ File extension must be .js, .mjs, or .cjs
6 | "scripts": {
7 | "start": "parcel index.html",
The "main" field is meant for libraries. If you meant to output a .html file, either remove the "main" field or choose a different target name.
Thanks in Advance
The source of that error is the "main": "index.html" field in your package.json. According to the documentation, this field is intended to be used by library projects (e.g. npm packages that are consumed by others) - it tells parcel to output a commonjs JavaScript bundle at that location, which doesn't make sense for an html file.
Since it doesn't appear that you are developing a library, you can simply remove "main": "index.html", and it should work fine (see migration docs).
To specify the ouput directory for non-library projects, use the --dist-dir cli parameter instead (see docs).
Rename main to default in the package.json file.
{
"version": "1.0.0",
"description": "",
"default": "dist/index.html"
}
Context :
I'm trying to use Editor.js library for a personal project
Editor.js documentation
There is the project directory :
There is the package.json :
{
"name": "quicknoteapp",
"version": "1.0.0",
"description": "",
"main": "myApp.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ."
},
"author": "",
"license": "ISC",
"devDependencies": {
"#editorjs/editorjs": "^2.19.0",
"electron": "^10.1.5",
"menubar": "^9.0.1"
}
}
My index.html :
<script type="module" src="main.js"></script>
And I import my library from main.js :
import EditorJS from '#editorjs/editorjs';
Finally, the console come up with this error :
TypeError: Module specifier, '#editorjs/editorjs' does not start with "/", "./", or "../". Referenced from file:///Users/charles/Desktop/QuickNoteApp/main.js
Ok, I need to add the relative path when I import the module. But I don't like to do it.
Why I need to use a relative path to an installed library ?
Why I can't do the same as the documentation? What I'm doing wrong during the project set up ? I don't think this is normal to add the path to each script. If not, why using npm... and got a node_module folder.
NPM is designed to manage packages for Node.js not for web browsers.
Web browsers are not Node.js. They do not support Node.js' module path resolution features (which involve searching multiple directories for matching files: Web browsers do not have access to directory listings, only to URLs).
The instructions assume you are using a tool like Webpack which uses Node.js to bundle JS modules into a single file for delivery to a browser. They don't assume you are going to load the modules into the browser directly.
_____ Project description _____
I started my Typescript & React project as a web app and I am currently in the process of converting that fully to an Electron app. I am having some trouble with this though.
_____ Where I am currently at _____
I followed this tutorial to get Electron to work. It works fine, other than that the electron.js file (in the tutorial called main.js, I placed it in my src folder, not the public folder) is a javascript file. This does not hinder my application from running, but I'd prefer having it in Typescript format. That is what I am stuck on. I converted it to a Typescript file, but I can't point to that from my package.json config.
_____ Problem Description _____
From my understanding, the main property in package.json needs to point to this electron.ts file. But of course, the file does not get processed correctly because it is not a javascript file.
_____ Question _____
How can I somehow point to the electron.ts file? Where does the transpiled code, generated on runtime, reside? Perhaps I could point the main property to there?
_____ package.json _____
...,
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom",
"electron-dev": "concurrently \"BROWSER=none npm run start\" \"wait-on http://localhost:3000 && electron .\"",
"electron-pack": "build -- em.main=build/electron.js",
"preelectron-pack": "npm run build"
},
"main": "src/electron.ts",
"homepage": "./",
"build": {
"appId": "com.example.electron-cra",
"files": [
"build/**/*",
"node_modules/**/*"
],
"directories": {
"buildResources": "assets"
}
},
...
I made a boiler plate starter pack which contains many applied bug fixes that I had to face when using react with electron and typescript and has auto monitoring of typescript changes to reload the electron app for faster development.
https://github.com/nateshmbhat/electron-react-ts-starter/
It works fine with Create react app and no need of ejecting it .
The fastest route that I found to getting typescript up and running was with electron-webpack.
With the add-ons, it's got your requirements covered. I've used this to great success for an electron-react-redux application.
I built an npm module named emeraldfw and published it. My package.json file is
{
"name": "emeraldfw",
"version": "0.6.0",
"bin": "./emeraldfw.js",
"description": "Emerald Framework is a language-agnostig web development framework, designed to make developer's lives easier and fun while coding.",
"main": "emeraldfw.js",
"directories": {
"example": "examples",
"test": "test"
},
"scripts": {
"test": "mocha"
},
"repository": {
"type": "git",
"url": "git+https://github.com/EdDeAlmeidaJr/emeraldfw.git"
},
"keywords": [
"web",
"development",
"framework",
"language",
"agnostic",
"react"
],
"author": "Ed de Almeida",
"license": "MIT",
"bugs": {
"url": "https://github.com/EdDeAlmeidaJr/emeraldfw/issues"
},
"homepage": "https://github.com/EdDeAlmeidaJr/emeraldfw#readme",
"devDependencies": {
"jshint": "^2.9.4",
"mocha": "^3.3.0"
},
"dependencies": {
"jsonfile": "^3.0.0",
"react": "^15.5.4",
"vorpal": "^1.12.0"
}
}
As you may see, I declared a "bin": "./emeraldfw.js" binary, which corresponds to the application itself. The package.json documentations says this is going to create a link to the application executable at node.js bin/ directory. This worked fine, but when I install it globally (npm install emeraldfw -g) and then run it from the command line I receive an error messsage
All other node modules are working fine and my application is passing in all tests and when I run it directly inside the development directory (with node emeraldfw.js) it works really fine.
I'm not a node.js expert and after having fought this error for two days, here I am to ask for help.
Any ideas?
EDIT:
I checked the permissions for my node binary (emeraldfw.js) and it belongs to edvaldo:edvaldo, my user and group. And it is with executable permissions set. I should have no permission issues inside my own area with these settings, don't you think?
Well, shebang issue here.
Before creating npm modules, you need read every single line of it's documentation.
As it stated here you need to use shebang to let your operating system know that it should run with node instead of operating system's own script execution hosts.
Please make sure that your file(s) referenced in bin starts with
#!/usr/bin/env node, otherwise the scripts are started without the node executable!
So, by using shebang on an npm module, you tell the os to create platform specific executables which let it use node to run the script. A .cmd file on Windows for example.
Have you try to install as su?