Develop Reference

How to include script located in node_modules folder using codeigniter 4?

I need to install this plugin on my application, so I followed the instruction and executed:
npm install --save #ckeditor/ckeditor5-upload
Usually, to load a plugin I create a file inside the load directory which contains the plugin name, in particular:
Views
load
ckeditor.php
which contains this:
<!-- Push section js -->
<?= $this->section('js') ?>
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/translations/it.js"></script>
<?= $this->endSection() ?>
so to include in a specific section of my app, I simply do:
<?= $this->include('App\Views\Backend\load\ckeditor') ?>
and this will inject the plugin into my app, but how can I do this with local dependencies installed via npm?

It looks like you want to use NPM modules client-side, which you actually can do. Check out Browserify: https://browserify.org/
It allows you to bundle up all the dependencies of NPM modules into JS code that you can deliver to the client, allowing you to use those NPM modules as 'native' functions in your client-side Javascript.

NPM (node package manager) packages are used for applications that run on node.js. Since your app is using PHP on backend, it's not suited to import backend JS packages.
In general, you can't use a backend JS package on a frontend because it usually contains code that is not available in the browser JS (such as accessing local files).
You'll need to find some other package that does a similar thing but for combination of PHP and browser JS.
Note: Configuring your HTTP server (usually Apache or Nginx) to publish the node_modules and link the (public URL of) NPM package from the frontend is a bad practice. Plus this particular package won't work anyway because it's using features that are not available in the browser JS.

In order to use CKEditor in your PHP application, The simplest way is to use CKEditor online builder tool and download complied version of the CKEditor code, and place it in your PHP application.
Visit: CKEditor online build
Follow the below steps:
Visit the above link of the CKEditor Online Build Tool.
Select Choose editor type as your desired editor.
Select the desired plugin that you want in your editor.
In the next section drag/drop and customize your editor layout.
At last select language and download the zip file.
Extract it and place it in your application's public folder eg.
public/ckeditor5.
Now navigate to the downloaded folder and open the index.html under
sample folder (public/ckeditor5/sample/index.html)
Copy last both scripts and place them in your working file where you
want to use CKEditor. Don't forget to modify the relative path of
your ../build/ckeditor.js file.

Why my React app is not loading correctly (broken) in localhost?

I had my react project working correctly in localhost. Then, I decided to deploy it to github pages and it worked perfectly on the server too. Now, I'm trying to work on it again on localhost but it is not showing correctly. For some reason, photos are not loading and some css is not working correctly and after compile it in PowerShell says this:
Compiled successfully!
You can now view myportfolio in the browser.
Local: http://localhost:3000/myportfolio
On Your Network: http://192.168.56.1:3000/myportfolio
Note that the development build is not optimized.
To create a production build, use npm run build.
So if I go to my GitHub pages it is loading correctly but not in localhost (running npm start).
Any suggestion? Thank you in advance and let me know if you need more clarification

I did clone your repositories and found these problems:
You have been directly imported many third-party js given their relative path in the index.html. That doesn't work. You should append %PUBLIC_URL% before them. For e.g.
<script src="%PUBLIC_URL%/js/jquery.flexslider.js"></script> and similary for other script files.
But even this is not the best that you can do. You must not try to use jquery or third party js in a React App. Also, make it a part to install the related JS though npm and make them a part of the package.
You'll have to use <img src={require('/public/images/background.png')}... (Btw, the image name on your gh-pages is different. It's logo.png there)if you want the webpack to compile and make it a part of your project. Also, the path must reside within src and not public folder.
Other errors are are related to keys. Whenever you're mapping and iterating through a list in react you must specify a unique key.

How to deploy nuxt js in production without hotreloading?

Nuxt js has strange way of the rebuilding after deployment. On rebuilding the website is not avialable for several minutes, and i'm searching the best way to run this process at the background without reloading.
Is there any solutions?

Build nuxt.js to another directory then that containing your website.
When build is complete replace old website files with new build (you can write simple bash script for this).

How to publish a browserify bundle for npm and the browser

I wrote an editor in HTML/JS that I want to use for multiple Electron based applications and a website.
For testing purposes I have package all dependencies, some are npm modules, some are font files, some are images, into a single file using browserify. For development I find this quite attractive as npm take care of keeping the packages up-to-date and browserify build even things like images and CSS into a single JS file. And included this bundle using a script tag in a html file.
Now I would love to get this onto npm to use as a dependency for other projects. But frankly I am at a loos as to how to do this.
Some blogs suggest to use:
module.exports = mymodule
But I want people and myself to be able to either get a single file and insert it using a script tag to get a global function to start my editor as well as require it using npm for Electron based apps.
startEditor = require('mymodule')
<script src="path/to/mymodule"></script>
Should both be valid ways to use the editor.
You can see the current state of the project on GitHub

NPM modules in Grunt based projects

Node has a simple module loading system which uses require() method call to load modules from different locations in the root folder.
E.g.
var qr = require('qr-image');
I am trying to do something similar in grunt but i am unsuccessful with that.
I had added this module to package.json file in the following fashion and then ran npm install at root directory of the project.
"devDependencies": {
.
.
.
"qr-image": "^2.0.0"
},
Now whenever I use require I get the following error on console and my code breaks.
ReferenceError: require is not defined
Please suggest as how to use the npm module in Grunt based project, Thanks.

The require function isn't available in web browsers. Instead it's part of nodejs, which is a server-side language (e.g., something you might run directly from your computer terminal, not in a browser) and used to load dependencies in that language.
In a web browser, I usually just include my dependencies as additional scripts on the page, e.g.,:
<script src="path/to/my/dependency.js"></script>
<script src="path/to/my/code.js"></script>
Some other options are RequireJS or what's listed in this question or as more of a general purpose dependency manager for front-end code: Bower.
Looking closer at your question, it's likely that the "qr-image" npm dependency won't work in client-side code for you (since it was built to run via node in server-side code).
A quick search for QR code client-side code brought up this SO post, which points to the QRCode.js project for client-side QR code generation—I haven't used it, but it looks like a step in the right direction for what you're working on.