We Keep Coding

electron build with solid-js shows error "Failed to load resource: net::ERR_FILE_NOT_FOUND"

I am using my Solid-JS based web app to standalone using Electron, but the app does not work even if it built successfully.
When I check it with developer tool, it shows the error "Failed to load resource: net::ERR_FILE_NOT_FOUND" to my css and index.tsx files.
In React cases, usually just add {"homepage": "./"} to package.json works, but it does not work for my case.
I just share my package.json and electron.ts file to find the problem. (it is in public/ directory)
package.json
{
"name": "my-solid-project",
"author": "AAAA",
"version": "0.1.0",
"description": "",
"type": "commonjs",
"main": "./public/electron.js",
"homepage": "./",
"scripts": {
"start": "vite",
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"test": "vitest",
"postinstall": "node ./fix-jest-dom.mjs",
"start-renderer": "cross-env BROWSER=none yarn start",
"start-main": "electron .",
"compile-main": "tsc ./public/electron.ts",
"start-main-after-renderer": "wait-on http://localhost:3000 && yarn start-main",
"electron-dev": "concurrently -n renderer, main 'yarn:start-renderer' 'yarn:start-main-after-renderer'",
"electron-dist": "yarn build && electron-builder --dir --config .electron-builder.config.cjs",
"predist": "yarn compile-main",
},
electron.ts
import * as path from 'path';
import * as url from 'url';
import { app, BrowserWindow } from 'electron';
import * as isDev from 'electron-is-dev';
import { join } from 'path';
const baseUrl: string = 'http://localhost:3000';
let mainWindow: BrowserWindow | null;
function createMainWindow(): void {
mainWindow = new BrowserWindow({
width: 1080,
height: 700,
webPreferences: {
nodeIntegration: true,
},
});
mainWindow.loadURL(`file://${path.join(__dirname, '../index.html')}`);
mainWindow.webContents.openDevTools();
if (isDev) {
mainWindow.webContents.openDevTools();
}
mainWindow.on('closed', (): void => {
mainWindow = null;
});
}
app.on('ready', (): void => {
createMainWindow();
});
app.on('window-all-closed', (): void => {
app.quit();
});
app.on('activate', (): void => {
if (mainWindow === null) {
createMainWindow();
}
});

The problem does not seem anything related to SolidJS but due to some malformed file path.
Edit: He was using absolute path in his config file.
I found out that vite build in my project imports resource files with absolute path.
You need to compile typescript files into JavaScript files in order to run in Electron renderer. So, there is no way to run index.tsx directly in Electron.
You application loads index.html file but it is not clear how you run your development server. Developers usually use something like this:
if (isDev) {
mainWindow.loadURL('http://localhost:3000');
} else {
mainWindow.loadFile(path.join(__dirname, 'index.html'));
}
Make sure your index.html file includes client code with their right paths.
In React cases, usually just add {"homepage": "./"} to package.json works
This is not a built-in Electron functionality. You must be using some package that mounts a react router.
If you are missing files in your executable file, make sure you bundle the required files in your final executable. You need to explicitly specify which files will be included in the bundle.
Here is a basic electron-vite-solid app: https://github.com/snnsnn/electron-vite-solid

Reading enviromental variable problem in node.js

Here is my excel.js:
let test = async () => {
console.log(process.env.DATABASE_HOST);
.......
}
test();
Here is my package.json fragment:
"scripts": {
.............
"excel": "cross-env NODE_ENV=development node ./server/excel.js",
"test": "react-scripts test"
}
My .env.development is stored in the application root folder.
Here is my .env.development:
DATABASE_HOST=dbServer
When I execute the following command line in the application root folder:
npm run excel
It should return "dbServer", unfortunately, it returns undefined.
How can I fix it?

Install dotenv package, and require it require('dotenv').config()

Why does watchman gives timeout error when using it with react-relay?

I'm using WSL Ubuntu to run a react-relay project, but after installing watchman using brew and trying to run the app in watch mode, watchman gives me the following error(I have run the project using yarn start):
Watchman error: The watchman server reported an error: "watchman::QueryExecError: query failed: synchronization failed: syncToNow: timed out waiting for cookie file to be observed by watcher within 60000 milliseconds: Connection timed out", while executing command: QueryRequest(
"query",
"/mnt/d/Work/Personal/react-relay-tutorial",
QueryRequestCommon {
glob: None,
glob_noescape: false,
glob_includedotfiles: false,
path: Some(
...
I've been trying reinstalling watchman without brew, with brew, the same error I get, nothing on the internet helped...
My package.json file:
...
"scripts": {
"start": "yarn run relay && react-scripts start",
"build": "yarn run relay && react-scripts build",
"relay": "yarn run relay-compiler --watch $#",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"relay": {
"src": "./src/",
"schema": "./src/schema.graphql"
},
...
"devDependencies": {
"babel-plugin-relay": "^13.1.1",
"graphql": "^16.3.0",
"relay-compiler": "^13.1.1"
}
...
relay.config.js file
module.exports = {
// ...
// Configuration options accepted by the `relay-compiler` command-line tool and `babel-plugin-relay`.
src: './src',
schema: './src/schema.graphql',
exclude: ['**/node_modules/**', '**/__mocks__/**', '**/__generated__/**'],
};
.babel.rc
{
"plugins": [
"relay"
]
}
Project structure:
PS: when running the project without any watchman it works just fine

package.json script ignoring NODE_ENV value for production only

I have a series of Jenkinsfiles that looks like this (this is the production version):
pipeline {
agent {
dockerfile {
filename 'Dockerfile'
dir 'jenkins/'
label 'agent && linux'
args '''
-v /var/lib/package-cache/.npm:/.npm:rw,z
'''
}
}
environment {
NODE_ENV = "production"
}
stages {
stage('Install dependencies') {
steps {
sh "npm ci --production=false"
sh "npx cypress install"
sh "npm install -g cross-env"
}
}
stage('Cypress tests') {
parallel {
stage('Start local server') {
steps {
sh returnStatus: true, script: "npm run start:test"
}
}
stage('Run Cypress tests') {
steps {
sh 'npm run wait'
sh 'cross-env NODE_ENV=test npm run cypress:run'
sh 'killall node'
}
}
}
}
stage('Build') {
steps {
sh "npm run build:${NODE_ENV}"
}
}
stage('Deploy') {
steps {
sh "npm run publish:${NODE_ENV}"
}
}
}
post {
always {
echo "Job completed"
}
}
}
Note that the versions for the Jenkinsfile for the other environments use that particular environment (development, qa, and staging) for the NODE_ENV = "{ENV}" line.
The scripts in my package.json includes the following:
{
"start": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack-dev-server --http --port 9003",
"start:development": "cross-env NODE_ENV=development npm run start",
"start:test": "cross-env NODE_ENV=test npm run start",
"start:qa": "cross-env NODE_ENV=qa npm run start",
"start:staging": "cross-env NODE_ENV=staging npm run start",
"start:production": "cross-env NODE_ENV=production npm run start",
"cypress:run": "cypress run",
},
In all non-production environments, the npm run start:test line in the Jenkinsfile correctly uses test for NODE_ENV when webpack dev server starts. When the production Jenkinsfile is used, however, it ends up using production for NODE_ENV rather than test when npm run start:test is called.
What would be causing my npm run start:test script to be ignoring the value (of test) I'm setting via cross-env and, instead, using production?

how to execute es6 scripts from CLI

I have the latest NodeJS installed and for any JavaScript files, I can execute it with node myscript.js but recently I'm learning es6 and for some of the latest syntax, it just pop out some errors/exceptions while executing. I tried babel-cli, but didn't seem to work as it is for compile es6 to 5 not for command line execute.

1) To enable the support of ES6, use the --harmony flag:
node --harmony myscript.js
This will enable the available ES6 syntax in node. But notice it's currently a limited subset of the ES6 standard (see the compatibility table).
2) To have a complete compatibility, you have to use babel node.
Install #babel/node to get a babel-node executable which works exactly the same as Node.js's CLI, only it will compile ES6 code before running it.
babel-node myscript.js

For simple ES6 or even Typescript experimentation, maybe Deno could be considered nowadays. It supports newest ES (and TS) out of the box without needing any additional tooling.

#source1
https://dev.to/geekygeeky/get-started-with-es6-javascript-for-writing-nodejs-using-express-544h
#create dir /project1
mkdir /project1
cd /project1
#install babel etc
npm i #babel/cli #babel/core #babel/node #babel/preset-env --save-dev
npm i #babel/plugin-proposal-class-properties #babel/plugin-proposal-object-rest-spread --save-dev
npm i rimraf nodemon --save-dev
#initialize project1
#https://philna.sh/blog/2019/01/10/how-to-start-a-node-js-project/
npm init
#edit /project1/package.json
nano /project1/package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "rimraf dist && babel src --out-dir dist --copy-files",
"start": "node dist/app.js",
"start:dev": "nodemon --exec babel-node src/app.js"
},
#edit /project1/.babelrc
nano /project1/.babelrc
{ "presets": [
["#babel/env", {
"targets": {
"node": "current"
}
}]
],
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-object-rest-spread"
]
}
#install express
npm i express --save
#open a bash shell
#create /project1/src
mkdir src
cd src
#edit /project1/src/app.js
nano /project1/src/app.js
import express, { json } from 'express';
import items from './items';
const app = express();
app.use(json())
const PORT = process.env.PORT || 3000;
app.get('/', async (req, res) => {
res.json({ status: true, message: "Our node.js app works" })
});
app.get('/items', (req, res) => {
res.json({ status: true, message: "Fetched all items", data: items })
})
app.listen(PORT, () => console.log(`App listening at port ${PORT}`));
#edit /project1/src/items.js
nano items.js
const items = [
{
id: 1,
username: "John doe",
cartItems: ['football', 'ps5', 'cd-rom'],
},
{
id: 2,
username: "Jane doe",
cartItems: ['mobile phone', 'game pad'],
}
];
export default items;
#open another bash shell
#run server
cd /project1
npm run start:dev
#keep the server running
#check your app via browser
http://localhost:3000
http://localhost:3000/items