How to run web project in VS Code using terminal? - javascript

I watched a video on YouTube and the creator created a simple JavaScript project. After that he just ran it in the terminal of VS Code.
I searched about this on YouTube and Google but I can't understand it.
How do I run my JavaScript project using the terminal in VS Code?

You should get help from Node.js ecosystem!
Install Node.js LTS version from official website! (node.js website)
Install live-server package(live-server website) globally
Go to the directory where the project is.
~ cd path/to/project
Then just run
~ live-server

You can use nodejs, but you can't use some javascript keywords and methods which run on the browser like document addEventListener (but we have on method). Because node is built for server-side applications, there is no document on the server.
If you are working on a frontend application, there are many packages you can use, like
serve (npm install -g serve)
live server (npm install -g live-server)
webpack

Related

Is there a way to have NPM build a package after it is installed?

I am currently using a github url as a package which is basically a private base library for my application.
While a npm package will run the npm build script after it is installed it currently appears that if you use a github url as package no build script will be run after installation (Yes in that thread they say that if using npm 5 a prepare script will be run but from my testing it does not work).
I am wondering if it's possible to define a script in a parent npm package.json that would run the build script of a dependency after it installs?
Or if you have any better way to deal with this problem would be most welcome.

Does npm install mean the script only works with Node.js

I'm trying to use an API via it's helpfully developed JS SDK. So the SDK instructions on the GitHub page are to npm install. I'm wondering though, does this imply I have to have Node.js because the SDK has been written specifically for it, or if I just have basic vanilla JS/jQuery, can I just.... Copy the source code from GitHub into my scripts or use it some other way?
It means that the project is using npm to handle dependencies. It has a package.json file that stores what those dependencies are, and npm install will download them into a folder usually called 'node_modules.'
It's dependency management. It doesn't mean it's written for node, but that it uses node to download external dependencies.

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

How to install Node.js or npm on Xampp

I'm new, so please excuse any mistakes.
I am trying to develop a web application locally using XAMPP. I intend to deploy using a hosted web service. XAMPP was a very convenient way to get me up and programming without any fuss.
There are several github javascript libraries that look like they can only be installed with npm. Does this mean that I cannot use them? The specific one that I'm currently having a problem with is: https://github.com/selz/plyr. Or, is it possible to install npm on my XAMPP server? I have a windows machine.
Thank you very much in advance for your help.
is it possible to install npm on my XAMPP server
You will not be installing NPM on your server, you will be installing it on your machine (think of it as a regular program you install on your PC) (if your server happens to be your PC as well, then, well, you are technically installing it on your server)
In order to be able to use NPM though, since NPM is written in JavaScript, you will need to install Node.js, also on your machine.
So, head over to the Node.js site and download and install Node. NPM is included in the installer and will be installed alongside Node.
After that is done, installing NPM packages is simply a matter of heading to your desired directory and executing npm install <PACKAGE_NAME> there.
In general, XAMPP helps you with your back end. Not your front end.
Useful links:
https://docs.npmjs.com/
Does this mean that I cannot use them?
No. You can install node at https://nodejs.org and then use npm through your windows command line to install packages. To test this, just
Install NodeJS
Open Command Line
Make a new folder under your user folder called test mkdir test
cd into that folder on Windows Command Line cd test
Create a new project with npm init -y *note this creates a
package.json file for you
Now you start installing packages with npm install <package>
--save * --save saves the package info in your package.json file (recommended). There is also -g wihch means the package will
be installed globally (usually you don't want this and only want it
locally to your project).
That's how you use NodeJS. If you want to use that with XAMPP then you need to do the same thing but instead of using your user folder (C:\users\yourname) you need to use the htdocs folder of XAMPP (usually C:\xampp\htdocs)

How to create web client application with nodejs and npm like angularjs tutorial

I am new to nodejs, npm also angularjs.
I have read and tried the angularjs tutorial project hosted on https://github.com/angular/angular-phonecat.git,
which for me is really exciting because it shows how easy to maintain the modules with bower, testing with jasmine and karma and perform e2e with protractor using npm command,
my question is, if I want to create project something like that, what I must do step by step? Is there any tutorial for creating project setup like that with npm and nodejs, not limited with angularjs but maybe just plain html CSS javascript or maybe with jquery.
Thanks
First install node
then install yeoman with npm install -g yo
then install the desired yeoman generators
for basic web app npm install -g generator-webapp
for angular npm install -g generator-angular
then run the installer generator.
exemple with webapp : yo webapp
or with angular : yo angular
I suggest you to read the yeoman getting started page

Categories

Resources