We Keep Coding

How to use a local node.js library in production?

I have a library in folder common with package.json:
{
"name": "common",
"version": "1.0.0",
"main": "index.js",
"license": "MIT"
}
I have another project that uses this library, in folder article with package.json:
{
"name": "article",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"webpack": "^5.1.3",
"webpack-cli": "^4.0.0"
}
}
Locally I did:
cd common
yarn link
cd ../article
yarn link common
This works fine I locally publish library and use it.
Now I want to deploy this project to CI, and I don't know how to make it work in another computer. Do I have to run this as a script, or is there a better way to use a local library.

If you don't want to create a module, you would want to get the code out to someplace like a repository so other env can access it. Perhaps try using it from git hub using the method from this article:
https://medium.com/pravin-lolage/how-to-use-your-own-package-from-git-repository-as-a-node-module-8b543c13957e

There is something called Yarn Workspaces: https://classic.yarnpkg.com/en/docs/workspaces/.
Basically in the root of your project you create a package.json file and add these properties in:
{
"workspaces": [
"common",
"article"
]
}
and run yarn install and now you can use these local libraries within your other projects.

How to deploy websites that include npm-downloaded packages to surge / gh-pages?

I'm quite new to the deployment part of websites with npm packages in it. and I'm trying to temporarily host my website to surge.sh in order to share & test it. It's a simple html website with paper.js scripts in it. By just launching the index.html in chrome it works. When deploying to surge I get this error:
Failed to load resource: the server responded with a status of 404 (Not Found)
Uncaught ReferenceError: paper is not defined
at HTMLDocument.<anonymous> (leaf_generator.js:2)
Is there an extra action that I have to go through when deploying sites with node packages in it (in my case paper.js)? E.g. building the site first, like for react apps? Or is it a problem with how I'm using paper.js in the script?
Here's a bit of my code:
// package.json
{
"name": "leaf_generator",
"version": "1.0.0",
"description": "testing paperjs",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "mark tension",
"license": "ISC",
"dependencies": {
"focus-visible": "^4.1.5",
"mathjs": "^6.0.2",
"p5": "^0.8.0",
"paper": "^0.12.1",
"underscore": "^1.9.1"
},
"devDependencies": {
"gh-pages": "^2.0.1"
}
}
From index.html I import paper.js and my paper.js script like this:
<script type="text/javascript" src="node_modules/paper/dist/paper-full.js"></script>
<script type="text/javascript" src="js/leaf_generator.js"></script>
And these are the first lines of the .js paper script from where the error is thrown:
$(document).ready(function() {
paper.setup("myCanvas");
with (paper) {
""""""""" paper.js code """"""""""""
}
Thanks!

The quick answer is that Surge.sh ignores the node_modules directory by default. If node_modules is in your .gitignore file (as it probably should be), they will also not be available on GitHub Pages. You’re right that as typically a build tool or static site generator will take all your dependencies and bundle them into build files.
Building on the comments, a couple of options of how you could fix your problem quickly:
Option 1: Use the unpkg service for your npm dependencies for now
One option is to use something like Unpackage, which will give you a pre-built and hosted version of your dependencies, directly from npm:
<script type="text/javascript" src="https://unpkg.com/paper#0.12.3/dist/paper-full.js"></script>
I prefer to link to a specific version, but you do also have the option of always using the latest version from npm by linking to https://unpkg.com/paper
Option 2: Un-ignore the node_modules folder on Surge
Alternatively, you can decide to publish your node_modules folder to Surge by adding a Surge ignore file and restoring that folder: https://surge.sh/help/ignoring-files-and-directories
Inside the folder you are deploying, create a fill called .surgeignore, and add:
!node_modules/
Option 3: Set up a build tool
As mentioned in the comments, you can set up Webpack or a similar tool to package Paper.js and your other JavaScript together, but that might be more than you need to bother with depending on where you’re at with your project.

Setting up Electron with React Typescript CRA

_____ 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.

index.js for npm package for browser transpiled with babel

Having some problems figuring out how to completely create and setup an npm package that I want to publish for use in browser environments.
I believe I'm missing some info on how to generate the index file.
I have the testpackage linked into my test application via npm link in both project directories. My test application is setup with webpack and babel and is written in es6, so using import and export.
The source is written in es6 and being transpiled via babel. Here's the relevant section of the package.json with the build command:
{
"name": "testpackage",
"main": "index.js",
"scripts": {
"build": "babel src --out-dir dist",
"lint": "eslint ."
},
"dependencies": {},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1"
}
}
I've tried creating the index.js file in two ways, first via es6 and again as module.exports but neither is working.
// es6 index.js in testpackage
import store from './dist/store';
import attach from './dist/attach';
export {store, attach};
--
// index.js with modules.exports
const path = require('path');
module.exports = {
store: require(path.resolve(__dirname, './dist/store')),
attach: require(path.resolve(__dirname, './dist/attach'))
}
In this es6 first case, the test application that I'm importing testpackage into isn't finding dist.
Module not found: Error: Can't resolve 'dist/store' in '/usr/local/apps/testpackage'
In the second case, the code is clearly meant to run via node, but instead is just being loaded directly into the browser. I was thinking the webpack + babel transpiling step in the test app should run this, but its not.
What about this setup am I missing?

Finally figured this out. The first approach was right. I needed to create an es6 index.js in the src directory that imports and exports the other files. Then babel transpiles this into the /dist directory, and main in package.json is pointed to /dist/index. The problem was that I didn't have the index being transpiled.

Issue with permissions in a node.js module

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?