NPM to deploy software - node.js

I'd like to use NPM to deploy my NodeJS + ExpressJS websites (API rest + front).
What i'm doing for now :
I setup a private NPM repository
I push my software as a NPM package to this repository
I do npm install mysoftware
Now, the problem, I have to do : node node_modules/mysoftware/bin.js
After step 4. I have the following file tree :
.
└── node_modules
├── my-software
│   ├── bin.js
│   ├── package.json
│   └── src
├── some-required-module
│   ├── HISTORY.md
│   ├── index.js
│   ├── LICENSE
│   ├── package.json
│   └── README.md
I don't like this file tree because everything is a the same level : my software and its dependancies, it makes it very messy.
I'd like it to be this way :
my-software
├── bin.js
├── package.json
├── src
└── node_modules
├── some-required-module
│   ├── HISTORY.md
│   ├── index.js
│   ├── LICENSE
│   ├── package.json
│   └── README.md
Is there a way to install an npm package as a project, and therefore have the file tree I'd like ?

Related

importing folder that shadows same name as third party dependency. What to do?

say I have a folder structure that looks like this:
.
├── CODEOWNERS
├── Makefile
├── README.rst
├── __pycache__
│   └── conftest.cpython-37-pytest-6.2.2.pyc
├── airflow
│   ├── __pycache__
│   │   └── __init__.cpython-37.pyc
│   ├── dev
│   │   └── dags
│   └── <some_file_I_need>
how do I import the file I need from the airflow local package (not the third party dependency named airflow). I have a dependency called airflow unfortunately and that gets imported when I do: import airflow.dev... and that errors out.

express serve index.html from create-react-app

for special Heroku purposes, I need to deploy the solution which would redirect all routes to create-react-app index.html.
$ tree -L 2 -I 'node_modules|temp|semantic|build'
.
├── package.json
├── package-lock.json
├── public
│   ├── favicon.ico
│   ├── index.html // all requests from "redirect" express app should point to this file
│   ├── libs
│   ├── manifest.json
│   └── semantic.css
├── README.md
├── redirect // express app
│   ├── app.js
│   ├── bin
│   ├── package.json
│   ├── public
│   ├── views
│   └── yarn.lock
├── semantic.json
├── src
│   ├── appConfig.js
│   ├── assets
│   ├── components
│   ├── index.js
│   ├── index.scss
│   ├── old
│   ├── pages
│   ├── serviceWorker.js
│   └── utils
├── yarn.lock
└── yarn-error.log
the redirect directory contains the express app where I need to redirect every request to index.html
everything is fine but in the index.html there is env variable %PUBLIC_URL% which would fail with error below when I run npm start from redirect folder
pandemic#bar ~/foo/redirect
$ npm start
> redirect#0.0.0 start <path>\redirect
> node ./bin/www
URIError: Failed to decode param '/%PUBLIC_URL%/libs/pdfmake/pdfmake.min.js'
How to resolve this issue?
note: I am using windows

Package is deleted at NMP install

Problem:
Package Now-UI-kit folder is deleted as soon as I run 'npm install' or if I install a package via 'npm install [package name]'
I have a development environment with a build tool for the development of my site. The environment has the Bootstrap framework and a lay-out kit: Now-UI-Kit. This is a template I bought. Based on the documentation of Now-UI-kit I have to run 'npm install' from the folder where the kit is installed. One folder up is node_modules. Below a tree, seen from the node_modules folder:
➜ node_modules git:(master) ✗ tree -L 2
.
├── bootstrap
│   ├── LICENSE
│   ├── README.md
│   ├── dist
│   ├── js
│   ├── package.json
│   └── scss
├── cookies-eu-banner
│   ├── Gulpfile.js
│   ├── LICENSE
│   ├── README.md
│   ├── bower.json
│   ├── css
│   ├── demo
│   ├── dist
│   ├── package-lock.json
│   ├── package.json
│   └── src
├── dyscrollupjs
│   ├── Gruntfile.js
│   ├── LICENSE
│   ├── README.md
│   ├── dist
│   ├── index.html
│   ├── package.json
│   ├── src
│   └── tsconfig.json
├── jquery
│   ├── AUTHORS.txt
│   ├── LICENSE.txt
│   ├── README.md
│   ├── bower.json
│   ├── dist
│   ├── external
│   ├── package.json
│   └── src
├── jquery_lazyscript
│   ├── jquery.lazyscript.js
│   ├── jquery.lazyscript.js.map
│   ├── jquery.lazyscript.min\ kopie.js
│   ├── jquery.lazyscript.min.js
│   └── jquery.lazyscript.min.js.map
├── now-ui-kit-pro
│   ├── CHANGELOG.md
│   ├── README.md
│   ├── assets
│   ├── docs
│   ├── examples
│   ├── gulpfile.js
│   ├── index.html
│   ├── node_modules
│   ├── nucleo-icons.html
│   ├── package-lock.json
│   ├── package.json
│   ├── presentation.html
│   └── sections.html
├── popper.js
│   ├── README.md
│   ├── dist
│   ├── index.d.ts
│   ├── index.js.flow
│   └── package.json
├── rellax
│   ├── LICENSE
│   ├── README.md
│   ├── bower.json
│   ├── css
│   ├── demo.html
│   ├── package.json
│   ├── rellax.js
│   ├── rellax.min.js
│   └── tests
├── resize_header
│   └── resize_header_logo.js
├── scripts
│   ├── jquery.lazyscript.min.js
│   ├── lazyload.js
│   └── rellax_parameters.js
└── social
├── changed\ -\ social.js
├── defer.js
└── social.js
The latest version of the Now-UI-kit I downloaded from the builder is v 1.2.2 and the latest version on npm is v1.1.0 enter link description here
A snippet from the package json in the src-folder (one folder higher than node_modules)
"dependencies": {
"bootstrap": "^4.2.1",
"cookies-eu-banner": "^1.2.14",
"dyscrollupjs": "^2.0.0",
"jquery": "^3.3.1",
"now-ui-kit-pro": "^1.2.2",
"popper.js": "^1.14.6",
"rellax": "^1.7.2"
},
The package json from the Now-UI-kit contains:
{
"name": "now-ui-kit-pro",
"description": "Premium Bootstrap 4 Now UI Design",
"version": "1.2.2",
"homepage": "http://creative-tim.com/product/now-ui-kit-pro",
"author": "Creative Tim",
"license": "Creative Tim License <www.creative-tim.com/license>",
"devDependencies": {
"gulp": "^4.0.0",
"gulp-autoprefixer": "^5.0.0",
"gulp-clean": "^0.4.0",
"gulp-install": "^1.1.0",
"gulp-open": "^3.0.1",
"gulp-sass": "^4.0.1",
"gulp-sourcemaps": "^2.6.4"
}
}
Constantly restoring the backup of the Now-UI-kit folder is quit cumbersome and is error sensitive. I recently started with using package, and for this problem, I'd like to understand how I kan solve the problem. I did do a search on Stackoverflow and found some suggestions which I did try, but no luck yet.
Thanks in advance for your time.

npm install: Is there a way to ignore a particular dependency in package.json

I am currently trying to create a docker container for a node.js project that contains a local dependency. This seems to cause an issue with docker so as a workaround I am trying to just copy the local dependency folders and just ignore their dependency entries in the package.json file. Is there a way to specify dependencies I would like to ignore and have npm install run and skip those enties?
That can be done using devDependencies
The npm modules which you require only to develop, e.g.: unit tests, Coffeescript to Javascript transpilation, minification etc,make the required module a devDependency.
To skip Installation of devDepenencies pass --production flag to npm install,with the --production flag(or NODE_ENV environment variable set to production) npm will not install modules listed in devDependencies."
npm install --production
To make any module to be part of devDependencies pass --dev while installing.
npm install packagename --save-dev
It is a common issue, not only with Docker, but also with some cloud deployments. For example deployment to CloudFoundry using standard Node.js buildpack will cause npm install/yarn to run anyway. So, you'll also need to apply some tricks to work with local modules
If you don't mind to switch from NPM to Yarn for dependency management, you can use workspaces feature.
My package.json looks like this:
{
...
"dependencies": {
"some-module-i-want-to-install": "1.0.0",
"another-module-i-want-to-install": "1.0.0",
"#my/local-dependency-one": "1.0.0",
"#my/local-dependency-two": "1.0.0"
},
"workspaces": ["packages/*"]
}
And my project source layout has the following structure:
.
├── index.js
├── package.json
├── packages
│   ├── local-dependency-one
│   │   ├── index.js
│   │   └── package.json
│   └── local-dependency-two
│      ├── index.js
│      └── package.json
└── yarn.lock
After running yarn, modules I want to install are fetched from NPM registry, and local dependencies are installed from packages directory to node_modules.
.
├── index.js
├── node_modules
│   ├── #my
│   │ ├── local-dependency-one
│   │ │ └── ...
│   │ └── local-dependency-two
│   │ └── ...
│   ├── another-module-i-want-to-install
│   │ └── ...
│   └── some-module-i-want-to-install
│   └── ...
├── package.json
├── packages
│   ├── local-dependency-one
│   │   └── ...
│   └── local-dependency-two
│      └── ...
└── yarn.lock
As you can see, I prefer to define my local packages as scoped (#my/...). It is not mandatory, but a best practice. NPM treats scoped packages as private by default, so I don't need to worry that they will be occasionally published or explicitly mark them as private.

Which directory to put snippets.json file for customization?

Emmet plugin installed on my vim74.
Here are some tutorial from the mannual .
https://docs.emmet.io/customization/snippets/
Create snippets.json file in extensions folder to add or override snippets.
sudo find / -name 'snippets.jsom'
nothing as output.
No snippets.json in my directories,i want to create it as the mannual say,which directory to put it in?
What does extensions folder mean?
Which directory is extensions folder for my vim and emmet?
tree -L 2 /usr/share/vim
/usr/share/vim
├── addons
│   ├── doc
│   └── plugin
├── registry
│   └── vim-runtime.yaml
├── vim74
│   ├── autoload
│   ├── bugreport.vim
│   ├── bundle
│   ├── colors
│   ├── compiler
│   ├── debian.vim
│   ├── delmenu.vim
│   ├── doc
│   ├── evim.vim
│   ├── filetype.vim
│   ├── ftoff.vim
│   ├── ftplugin
│   ├── ftplugin.vim
│   ├── ftplugof.vim
│   ├── gvimrc_example.vim
│   ├── indent
│   ├── indent.vim
│   ├── indoff.vim
│   ├── keymap
│   ├── lang
│   ├── macros
│   ├── menu.vim
│   ├── mswin.vim
│   ├── optwin.vim
│   ├── plugin
│   ├── print
│   ├── rgb.txt
│   ├── scripts.vim
│   ├── spell
│   ├── synmenu.vim
│   ├── syntax
│   ├── tutor
│   └── vimrc_example.vim
├── vimfiles -> /etc/vim
├── vimrc -> /etc/vim/vimrc
└── vimrc.tiny -> /etc/vim/vimrc.tiny
tree -L 1 /usr/share/vim/vim74/autoload
/usr/share/vim/vim74/autoload
├── adacomplete.vim
├── ada.vim
├── ccomplete.vim
├── clojurecomplete.vim
├── csscomplete.vim
├── decada.vim
├── emmet
├── emmet.vim
├── getscript.vim
├── gnat.vim
├── gzip.vim
├── htmlcomplete.vim
├── javascriptcomplete.vim
├── netrwFileHandlers.vim
├── netrw_gitignore.vim
├── netrwSettings.vim
├── netrw.vim
├── paste.vim
├── phpcomplete.vim
├── python3complete.vim
├── pythoncomplete.vim
├── README.txt
├── rubycomplete.vim
├── spellfile.vim
├── sqlcomplete.vim
├── syntaxcomplete.vim
├── tar.vim
├── tohtml.vim
├── vimball.vim
├── xml
├── xmlcomplete.vim
└── zip.vim
2 directories, 30 files
tree -l 1 /usr/share/vim/vim74/plugin
1 [error opening dir]
/usr/share/vim/vim74/plugin
├── emmet.vim
├── getscriptPlugin.vim
├── gzip.vim
├── matchparen.vim
├── netrwPlugin.vim
├── README.txt
├── rrhelper.vim
├── spellfile.vim
├── tarPlugin.vim
├── tohtml.vim
├── vimballPlugin.vim
└── zipPlugin.vim
The linked page says:
Please refer to README file bundled with your editor’s plugin to find out where Emmet looks for extensions.
When you read this sentence, what is the only reasonable thing to do? Reading your plugin's READMEof course! A README that says:
If you have installed the web-api for emmet-vim you can also add your own snippets using a custom snippets.json file.
Once you have installed the web-api add this line to your .vimrc:
let g:user_emmet_settings = webapi#json#decode(join(readfile(expand('~/.snippets_custom.json')), "\n"))
You can change the path to your snippets_custom.json according to your preferences.
1.to install pathogen.vim
mkdir -p ~/.vim/autoload ~/.vim/bundle && \
curl -LSso ~/.vim/autoload/pathogen.vim https://tpo.pe/pathogen.vim
2.to edite snippets.json
copy https://github.com/emmetio/emmet/blob/master/lib/snippets.json and revise something for your customization.
I want to make html:5 expand as below.
<html lang="zh">
<head>
<meta charset="gbk">
<title></title>
</head>
<body>
</body>
</html>
vim ~./vim/snippets.json
"variables": {
"lang": "zh",
"locale": "en-US",
"charset": "gbk",
"indentation": "\t",
"newline": "\n"
},
To list only part codes of it.
3.to edite your .vimrc to call snippets.json
vim .vimrc
let g:user_emmet_settings = webapi#json#decode(join(readfile(expand('~/.vim/snippets.json')), "\n"))

Resources