자동컴파일 생략한 간단한 트랜스파일 방법 - youtube
Why not use the VS Code live-server extension instead of installing Node.js and then installing a 'http server' package through NPM? Quora link
James Bubb ----------------------
If you’re just looking to get a live preview of your HTML markup then there’s no difference; the live-server extension will do just fine.
However, installing a Node package may open up more possibilities for you.
The bog-standard ‘http server’ packages you refer to will offer additional features such as sharing your work across a network and syncing your scroll position on the page with others (great for demos). One such example is the http-server package.
Also, if you’re using a bundling tool like Webpack or Parcel you will still get the live preview aspect you are looking for however, your Sass files, JavaScript files and other resources will be parsed into a browser friendly format on the fly so you don’t need to compile these resources before previewing them. This is something, as far as I know, the live-server extensions won’t do for you.
Bailey Stoner ----------------
Because you can’t just deploy VSCode to your servers/clients to run your systems in production and you want to test your code in an environment that is as similar as possible to the production environment.
How To Create a Web Server in Node.js with the HTTP Module
★★ How to run html file using node js
1. npm init -y
2. install express in root of app
npm install --save express (save will update package.json with express dependency)
3. create index.html in "www" folder
create a "www" folder in root of your app and put your entry point file (index.html) and all its dependent files (this is just for simplification, in large application this might not be a good approach). ?????
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="module" src="build/index.js"></script>
</head>
<body>
hi! welcome
</body>
</html><script type="module" src="src/index.js"></script>
왜 컴파일된 build/index.js는 에러가 나는지 ??????, 심지어 컴파일 안 한(바벨 설치 전) es6 js는 에러 없이 잘 렌더링 됨
4. create a server.js
Create a server.js file in root of app where in we will use express module of node which will serve the public folder from its current directory.
server.js - 포트 8080으로 변경 안해도 됨? (.env파일의 포트)
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/www')); //__dir and not _dir
var port = 8000; // you can use any port
app.listen(port);
console.log('server on' + port);express ???
Express Framework in Node.js
https://www.tutorialspoint.com/nodejs/nodejs_express_framework.htm
Express is a minimal and flexible Node.js web application framework that provides a robust set of features to develop web and mobile applications. It facilitates the rapid development of Node based Web applications. Following are some of the core features of Express framework −
- Allows to set up middlewares to respond to HTTP Requests.
- Defines a routing table which is used to perform different actions based on HTTP Method and URL.
- Allows to dynamically render HTML Pages based on passing arguments to templates.
5. do node server
do node server : it should output "server on 8000"
node server 는 go live와 함께 실행 안되는지???
start http://localhost:8000/ : your index.html will be called
Why not use the VS Code live-server extension instead of installing Node.js and then installing a 'http server' package through NPM? Quora link
How to write and debug es6+ code with node.js and visual studio code?
1. create index.js / string_function.js files in www/src/
index.js
import { capitalizeString } from "./string_function.js";
const cap = capitalizeString("i don't owe anyone any explanation.");
console.log(cap);
alert(cap);
import { capitalizeString } from "./string_function.js "; 왜 index.html에서만 확장명 꼭 필요한지 ??????
answer1 :
Does ES6 import/export need ".js" extension? - stackoverflow
I've never tried those experimental features, but in node.js you use the commonJS mechanism. I've come across similar problems and the solution was to avoid letting the loader guess the extension. Also, if you have two files both may be viable, such as data.js and data.json. I think it's better to be explicit, but that's just my opinion.
----------------
es6는 확장명이 필요하다는 설명
ES6 import/export need “.js” extension. There are clear instructions in node document:
Relative specifiers like './startup.js' or '../config.mjs'. They refer to a path relative to the location of the importing file. The file extension is always necessary for these.
This behavior matches how import behaves in browser environments, assuming a typically configured server.
https://nodejs.org/api/esm.html#esm_import_expressions
answer2 :
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
string_function.js
export const capitalizeString = str => str.toUpperCase()2. create a '.env' file
# Environment
NODE_ENV = development
PORT = 8080
3. setting up babel
npm install --save-dev @babel/core
npm install --save-dev @babel/cli
npm install --save-dev @babel/preset-env
4. create a 'babel.config.json' file
babel.config.json
{
"presets": ["@babel/preset-env"]
}6. open the 'package.json' file and modify the scripts object as follows.
"scripts": {
"build:dev": "babel www/src -d www/build --source-maps --watch"
},babel www/src -d www/build
7. compile the src folder and output them to the build folder.
npm run build:dev
8. set up debugging in visual studio code
+ + click index.js file and select debug tab
To allow debugging of the currently opened file in the editor, modify the launch.json file by adding a new configuration, Launch Current File, for debugging the current file.
.vscode/launch.json (overwrite the whole code as follows)
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch App",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/src/basics.js",
"envFile": "${workspaceFolder}/.env",
"outFiles": [ "${workspaceRoot}/build/**/*.js" ]
},
{
"type": "node",
"request": "launch",
"name": "Launch Current File",
"skipFiles": [
"<node_internals>/**"
],
"program": "${file}",
"envFile": "${workspaceFolder}/.env",
"outFiles": [ "${workspaceRoot}/build/**/*.js" ]
}
]
}
Configuration can be switched in the visual studio code editor by selecting the appropriate configuration.
How to write and debug es6+ code with node.js and visual studio code? – theCodeReaper
When starting a new node.js project, a number of initial steps are required to ensure that the new es6+ features can be used, and to ensure debugging is enabled in the node.js project. Two most common tools used to make these initial steps much more simple
thecodereaper.com
1. install node.js install node.js
how to make sure /usr/local/bin is in my $PATH. on mac ?
open terminal and type the command below
echo $PATH
You should see something like this
/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin
the presence of /usr/local/bin in the output means you are good to go
2 - 1. Create a new project folder and navigate to it using a console or terminal.
navigate to a folder in terminal on mac
Simply, open the terminal, type in the cd command followed by the folder path you want to navigate.
(1)
cd /Users/ ~ /Desktop/foldername
(2)
Alternatively, you can also drag a folder (or pathname) onto the Terminal application icon. It’ll automatically grab the path of the folder, next hit enter.
(3)
open a New Terminal in VS
2 - 2. Create a simple npm project navigated to a project folder.
npm init -f
2 - 3. create a simple app and add a breakpoint
Open the project in visual studio code and create an src folder with the following files.
src/calculator.js
export default class Calculator {
add(num1, num2) {
return num1 + num2;
}
}
src/server.js
import Calculator from './calculator';
const calculator = new Calculator();
const result = calculator.add(1, 3);
console.log(result);
Add a breakpoint to line 3 in the server.js file.
3. create a '.env' file
In the root folder of the project, create a .env file to store environment variables as follows.
# Environment
NODE_ENV = development
PORT = 8080
4. setting up babel
Run the below commands to install babel as a development dependency.
npm install --save-dev @babel/core
npm install --save-dev @babel/cli
npm install --save-dev @babel/preset-env
5. create a 'babel.config.json' file
Create a babel.config.json file in the root folder of the application with the below json.
{
"presets": ["@babel/preset-env"]
}6. open the 'package.json' file and modify the scripts object as follows.
"scripts": {
"build:dev": "babel src -d build --source-maps --watch"
},
The above script will compile all the code in the src folder to a compatible JavaScript version (that is, version < es6) and output the compiled files to a folder called build. The --source-maps option generates source maps that can be used by the visual studio debugger. The --watch option enables babel to compile a file every time it is changed.
7. compile the src folder and output them to the build folder.
In a terminal or console, run the following command to compile the src folder and to output the compiled code to the build folder.
npm run build:dev
With the watch option enabled, babel will automatically compile a file every time it is changed. ??? not working ... (for some reason I have to run the 'run build' code every time I change the file in the src folder )
8. set up debugging in visual studio code
In visual studio code, create a node.js launch.json file with the following Launch App configuration.
To allow debugging of the currently opened file in the editor, modify the launch.json file by adding a new configuration, Launch Current File, for debugging the current file.
.vscode/launch.json (overwrite the whole code as follows)
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch App",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/src/basics.js",
"envFile": "${workspaceFolder}/.env",
"outFiles": [ "${workspaceRoot}/build/**/*.js" ]
},
{
"type": "node",
"request": "launch",
"name": "Launch Current File",
"skipFiles": [
"<node_internals>/**"
],
"program": "${file}",
"envFile": "${workspaceFolder}/.env",
"outFiles": [ "${workspaceRoot}/build/**/*.js" ]
}
]
}
Configuration can be switched in the visual studio code editor by selecting the appropriate configuration.
9. debug the application
Now that everything is set up, press F5 to start debugging the application. The debugger should stop at line 3 in the server.js file when using the Launch App configuration.
Problem while loading html with compiled js :
1. Uncaught SyntaxError: Cannot use import statement outside a module
Uncaught SyntaxError: Cannot use import statement outside a module
https://dev.to/muhammedmoussa/clean-up-your-html-with-es6-modules-4857
in a html file :
<script src="build/basics.js" type="module"></script>
2. blocked by CORS policy (after adding - type="module" -)
"Access to script at 'file:///~.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https."
cross origin requests are only supported for HTTP - error when loading a local file
🔮 My crystal ball says (🙄) that you are loading the model using either file:// or C:/, which stays true to the error message as they are not http://
So you can either install a webserver in your local PC or upload the model somewhere else and use jsonp and change the url to http://example.com/path/to/model
setup a http server using NodeJS
stackoverflow : how to run html file using node js
<question> I have a simple html page with angular js as follows. ~ I am new to node js. I have installed node js server in my system but I am not sure how to run a simple html file using node js?
You can use built-in nodejs web server.
Add file server.js for example and put following code:
var http = require('http');
var fs = require('fs');
const PORT=8080;
fs.readFile('./index.html', function (err, html) {
if (err) throw err;
http.createServer(function(request, response) {
response.writeHeader(200, {"Content-Type": "text/html"});
response.write(html);
response.end();
}).listen(PORT);
});And after start server from console with command node server.js. Your index.html page will be available on URL http://localhost:8080
how to display html files from node js - 16 Aug 2020
what we want to do is to have more flexibility by having html file. We will have all the contents as we wish using the old school html tag and we will serve that through node js.
1. create a directory node-input
2. move to that directory and issue the following command to install express in it
sudo npm install express
3. The above command would install express package in node_modules folder. This is the folder where all third party packages would be stored.
4. create server.js file in the folder node-input.
var express = require("express");
//use the application off of express.
var app = express();
//define the route for "/"
app.get("/", function (request, response){
//show this file when the "/" is requested
response.sendFile(__dirname+"/views/index.html");
});
//start the server
app.listen(8080);
console.log("Something awesome to happen at http://localhost:8080");5. create a folder views in node-input folder
6. create index.html inside views and add the following code in it
<html>
<head><title>Simple hello world</title></head>
<body>
<h1>Hello Node JS</h1>
</body>
</html>7. go to your browser and type http://localhost:8080
It is like the previous example except we are serving the actual physical html file this time.
By doing so, we have more control on the html file like adding css and javascript codes or calling those files on the page.
Mind you, index.html is the entry point, once we got on that page, we can navigate to other pages and do more.
It might seem odd if you’re coming from a PHP background to talk about creating our first server in a JavaScript file, but that is in fact what we are about to do. This is because we are used to having a server like Nginx or Apache which are set up to interpret PHP code. The Nginx or Apache process then serves the HTML files to the user. In this case we are writing our own server. Let’s see how to complete this task.
how to create a server and render some HTML in Node.js.
Node.js provides the ability to create server functionality and bypass the traditional idea of a stand alone web server. For example in Node.js, we can specify a port to communicate on, which domain to use, and now to handle http requests. This new file will have instructions to listen to http requests, and do something with these requests.
This server.js file is the file that Node.js will execute, and will set up a type of loop. Node will continue to listen to requests as long as we allow the program to run. Let’s add a bit of code to our file.
let http = require('http');
let handleRequest = (request, response) => {
response.writeHead(200, {
'Content-Type': 'text/plain'
});
response.write('Hi There!');
response.end();
};
http.createServer(handleRequest).listen(8000);
setup a simple http server / local web server using NodeJS JUNE 22 2016
Install the http-server globally on your machine using the node package manager (npm) command line tool, this will allow you to run a web server from anywhere on your computer.
Open a command prompt / command line window and enter the following:
npm install -g http-server
Change to the directory containing your static web files (e.g. html, javascript, css etc) in the command line window,
cd \~
Start the server with this command:
http-server
You should see something like the following:
C:\projects\angular-registration-login-example>http-server
Starting up http-server, serving ./
Available on:
http://192.168.0.5:8080
http://127.0.0.1:8080
Hit CTRL-C to stop the server
serve an html page using node.js
How to enable ES6 (and beyond) syntax with Node and Express
How to Setup ES6 for Node.js using Babel
es6 - babel - browser (youtube)
https://dev.to/muhammedmoussa/clean-up-your-html-with-es6-modules-4857
https://www.sitepoint.com/vs-code-extensions-javascript-developers/
10 Must-have VS Code Extensions for JavaScript Developers - SitePoint
Michael lists a selection of must-have VS Code extensions for JavaScript developers, showing why VS Code is a serious contender for best code editor.
www.sitepoint.com
- JavaScript (ES6) code snippets, by Charalampos Karypidis. This is currently the most popular javaScript snippet extension with over 3+ million installs to date. This extension provides ES6 syntax for JavaScript, TypeScript, HTML, React and Vue. All snippets include a final semicolon.
https://scotch.io/bar-talk/11-awesome-javascript-extensions-for-visual-studio-code
11 Awesome JavaScript Extensions for Visual Studio Code
One of the most impressive parts of Visual Studio Code is customizability, especially via extensions. Here are some of the best extensions in VS Code for writing JavaScript.
scotch.io
