How to build this project into a single Javascript file? - javascript

I am currently working on integrating a chat system into my web application. This is the project which is given to me to take as a base: https://github.com/smilefam/SendBird-JavaScript/tree/master/web-widget
I have made some changes to the JS and SCSS files. Now how do I build it into the single Javascript file so that I can import it to my application?
I am executing the following command
npm run build
But it throws an error saying,
npm ERR! missing script: build
I am a complete newbie to Node and hence looking for some help.

From what I can see in your package.json I understand that you have not defined a build command under the scripts section.
Adding a build command there should work.

This error appears because you don't have a build script inside of the scripts field in your package.json.
Your scripts should be defined in your package.json.
To read more information about how to make a package.json, click on here
Hope this helps.

Related

How can I run nodejs in eclipse?(javascript runtime does not appear in eclipse preferences)

Maybe similar questions found but those are very old and recommending outdated plugins.
-I'm using eclipse Ide for enterprise java developers 2021-06 and installed Nodejs 16.3 and Npm.
As eclipse news
says, Eclipse Neon and later will support jnodejs by default and you can configure runtime but I don't see any runtime in javaScript section in preferences and any option related to nodeJs and JavaScript in import sections.
I tried to install nodeClipse plugin but encountered errors.
When I import nodeJs project as general project, I get this error.
C:\Users\Hamidreza Abroshan\Documents\workspace-spring-tool-suite-4-4.12.0.RELEASE.metadata.plugins\org.eclipse.wildwebdeveloper.embedder.node\node-v14.15.4-win-x64\node.exe index.js
D:\dclm\dclm-customer-interaction-worker\dclm\node_modules\grpc\src\grpc_extension.js:55
throw error;
^
Error: Failed to load gRPC binary module because it was not installed for the current system
Expected directory: node-v83-win32-x64-unknown
Found: [node-v93-win32-x64-unknown]
This problem can often be fixed by running "npm rebuild" on the current system
Original error: Cannot find module 'D:\dclm\dclm-customer-interaction-worker\dclm\node_modules\grpc\src\node\extension_binary\node-v83-win32-x64-unknown\grpc_node.node'
Require stack:
D:\dclm\dclm-customer-interaction-worker\dclm\node_modules\grpc\src\grpc_extension.js
**Note: I can run this project from command line successfully with npm run start.
Thanks in advance.
I found this way, but if you found better way, please post your answer.
First, import the app as general project E.G, file>import>general>existing project in to workSpace.
Then, open project explorer view and find package.json.
Write click on that and choose run configuration.
choose launch npm and create new configuration.
Now, in npm command enter run start and in package.json file enter the file's address.
Hit run and your app will run successfully.
This config should be done for the first time and for later times, you can go to runAs and choose npm...
If you can not find package.json, open Cmd and navigate to project root folder and type npm run start and it will download some dependencies and create package.json also.

How to convert html into react components by using CLI command html2react?

I am trying to implement automated process of converting html into react components. I am following below link to automatically convert html into react components.
https://www.npmjs.com/package/html-to-react-components
but i am getting failure of command html2react. I also installed the package by using below command.
"npm i -g html-to-react-components".
But still it is saying "'html2react' is not recognized as an internal or external command,operable program or batch file".
The problem was that I installed the package globally. As i installed globally so i have to place my html file in C:/Users/YourComputerName/AppData/Roaming/npm.
and then from CLI I have to open the above folder and directory in which my html2react package is installed.
And then from that directory I have to implement the html2react command.
For clear understanding i am also attaching snapshot as well. CLI command description
Have a good learning.

Debugging an NPM module

Currently, I've created an NPM module and published it to NPM and included it in a separate project for use. I've performed NPM link so I don't have to publish every time I make a change and those updates are being reflected appropriately. However, I can't seem to debug the module itself. I've tried placing a debugger in the modules code within the node_modules directory and I've tried to place one in the actual module project, but to no avail. Is there a best practice for debugging an NPM module? If it helps, I'm using Visual Studio Code.

Deploying Angular2 quickstar project

I have cloned the Angular2 quickstart repo and build a simple app. I want to publish it to the web now. It runs locally but it references files directly inside the node_modules directory.
Is there a standard build process I can run that will copy all needed files to the output directory? Or do I have to create this myself from scratch with a task runner or something?
This is my first time to answer a question so bear with me if I didnt do it correctly.
If "bundling all angular 2 ts/js and other dependencies (core.js, rxjs, zone.js) into one js and create a script tag on index.html to reference the bundled js" close to the standard build process you mentioned and you want, my answer is yes, you probably need to npm install some other tools to do it.
Since the angular 2 quickstart is using systemjs to do ES module loading, the tool you can use is called "systemjs builder" https://github.com/systemjs/builder which helps you to do bundling (based on systemjs.config.js) and yes, you can use a task tunner (grunt or gulp) with systemjs builder plugins (gulp-systemjs-builder or grunt-systemjs-builder) to create a task to "build".
You can use this https://github.com/AngularClass/angular2-webpack-starter
And using npm run build:dev or npm run build:prod
It will build a dist folder and that's all you need.

Is it possible to run React project without npm start?

I'm in a big trouble. Working in a part time in a company they're looking for a new web technology to build "web-component" in their website.
They have started to use AngularJS (first version) and I told them that, with the recent evolution of this framework, it's not the right period of time to deal with it.
That's why I began to be interested in ReactJS. However, they don't have a node.js server infrastructure (and that's why AngularJS suits to them, only one browser is sufficient) so it's impossible to run it with something like "npm start".
SO ! My question is (as my post's title says...) :
Is it possible to run ReactJS without server side ?
I've tried with the following line in my header
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
But it remains a blank page.
Maybe there is something I don't understant in the react structure and that's why I'm looking for some help/explanations from you.
I hope I have been clear enough ! Thank you in advance for answer.
It is absolutely possible to run a React app without a production node server. Facebook provides an easy-to-use project bootstrapper that you can read about here
That being said, developers may need to use a node dev server locally via npm start, as well as using node to perform production builds via npm run build. But one can take the build output from npm run build and serve it from any static server and have a working react application.
For those who are getting 404's after deploying in a sub directory. Make sure to add the path in package.json as homepage.
"homepage": "https://example.com/SUB-DIRECTORY",
You should insert "homepage": "./" into your package.json file, then use building react-script command like npm run build.
I did it by using serve, as part of the build step in Jenkins. To install it, execute the command:
npm install -g serve
Then, to serve it:
serve -s build
Please, refer to project page for more information: https://github.com/zeit/serve

Categories

Resources