So, I'm heading to new territory in web dev.
I set up a basic npm project using npm init in my project folder. I don't have angular, react or any other Dev framework running. Basically I want to get started with some npm packages to easily update the things I need.
For my first test I picked bootstrap and font-awesome.
For testing I have a http-server running and displaying a index.html file from the public folder.
The site I'm displaying is a basic html site for now. How do I actually implementy packages the right way? Using <link rel="stylesheet" href="/path/to/node_modules/..."> is one option but not actually the way it is done, right?
Or will it be repacked once I'm ready for production. Since node_modules is not going to be transferred to the prod server.
Thank you very much in advance!
there is a difference between running javascript in nodejs and the browser javascript engine.
although nodejs is built on top of v8 javascript engine, nodejs is different in some ways, here are 2 of them:
nodejs is used mainly in server-side programming, where javascript is used for client-side
nodejs has builtin libraries which are not in the javascript specifications
if you are developing a client-side in nodejs (using react, angular or any other client-side frameworks), you will have to "convert" (a process called transpiling) it to run within the browser.
there are several tools which can help you in the process of transpiling your code. some famous ones are webpack and parcel in conjunction with babel (to pollyfill) to "build" your project and yield a bundled (few javascript file, usually one, that bundles all the javascript code into one of more files) javascript file(s), which are loaded by the webpage.
as you can see, once the project is bundled, node_modules directory has no use -- exactly what you want.
Related
I am playing with a node application, which is running a basic hello-world HTML page.
I want to use isomerjs, which I installed via npm - though I imagine this question is more general than this one particular module. I do see it in the node_modules directory.
I'm not sure where to point my <script src="/path/to/isomer.min.js"></script> at. The module directory appears to only have the uncompiled files.
What is the accepted or standard way of utilizing front-end code from a node module? Am I missing a step?
first, the "facts" that I know:
reactJS is frontend framework, after compiling it'll generate a bundle of html/js/css files that can be recognized by modern browsers, so the browser straightforward request the web host server for these static html files ;
nodeJS is a server-side environment, or sometimes people call it a backend framework, browsers don't understand nodeJS but have to request the web host server to interpret it and to send back the html response.
according to wiki, npm is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js.
my question is:
is my understanding correct
why reactJS also using npm and includes node_module, does it have something to do with nodeJS
Javascript is the programming language used in both Node.js and in the browser, but that's about as far as the similarities goes. Node uses the V8 engine, which is the same running in the chrome browser.
Even though they use the same engine, they are quite different. They both have plenty of APIs - most notably, the browser has the DOM (which allows you to render stuff to the screen). In Node.js you do not have the DOM, but there are other APIs, for accessing the filesystem for instance.
Since both are running JavaScript, you can try to run the same program both in node and in the browser, but it will sometimes fail. React is a front-end framework which uses the DOM, so if you try to run React in node, it will crash because in Node there is no DOM (Node has no screen to render to). If you try to run a program suited for Node.js in the browser, it will crash if it uses some Node-specific API.
The confusing bit is that npm is a package manager for JavaScript, not necessarily node (even though node is in the name..). Therefore, we can use npm also for web applications. (If we do, we need to use a bundler like webpack though).
Some npm modules might work both in the browser and in node, but some will only work on one of them. If the npm module requires some platform-spcific API (DOM for the browser for example) then it will not work for the other platform.
Hope that clears things out! I understand that it's a bit of a mess..
I am new to programming and I learned how to use laravel and vuejs (which now ship together in laravel 5.3). I'm only practicing Vuejs right now, and was wondering what is so wrong with installing Vuejs using a simple src link rather than going the complex way of installing with npm and node.js, which is another learning curve for me if I have to learn it down the road anyways. Thanks for answering, I just don't understand what could be wrong with a simpler minified src link for a Vue.js installation.
If you use standalone version of Vue.js via a simple minified src link, it will come with a template compiler. The Vue component templates will be compiled in the browser environment for every user, before rendering. Therefore it will be slower compared to the runtime build option.
If you create a project using npm and vue-cli, you will get the runtime build of Vue.js, which will also package the vue app into one single app.js file, thus minimizing network requests for your production app. Your users will have a much better experience.
If you are only getting started, you can go with the simple minified src link for now. Once you get used to the framework, you can start using vue-cli.
I am using webpack to build my files. I'm not sure if I don't understand the workflow or not. I am trying to code split my files and then have them loaded on routes that need them. But the starter pack I am using has the webpack config placing them in the index.html file so they are all loaded on app init.
Is it intended that we would be running a node server in production for async component loading? Or should webpack not be putting these into the index file?
Async chunks are simply added in <script src="..." async></script> by JavaScript on the client side - so there is nothing to do with backend. Webpack is server agnostic, you can use node, java, php, etc.
Probably you are confused with node in most starter kits, because node is the most lightweight and quick to configure backend out of the box. Also if you install project with NPM there is guarantee that you have got node installed on your system. That's why node is so popular in starter kits.
I am using angular2 with nodejs, how about using apache/xampp. will it support or nodejs npm server is mandatory for angular2
Considering for development ,NodeJS is Mandatory for angular2 !
let me tell you why?
Angular2 comes with typescript support which is transpiled into javascript.
NodeJS offers typings & other dependency packages like SystemJS,RxJS which helps angular2 do thye magic you call Angular.
Though you could run angular2 apps in Xampp but recommended approach will be with NodeJS as it offers a lot more flexibility & framework support for development.
for eg. Angular-Cli is node module which helps you setup your project really fast.
On top of that node gives you flexibilty to add third party libraries easily into your project.
You can use Xampp but then you will need your server to load transpiler manually which will transpile ts files into javascript files as currently there is no support in Xampp as far as I know and that will be quite a task to do.
So I will go with NodeJS on this.
For production:
once you build bundle from your application , it can be deployed to any server which runs javascript. So in that case NodeJS is not required.
It depends on what we are talking about.
For Development you must have NodeJS on your dev machine to load all libs, transpile TS, prepare build files and so on.
For Production server you can use whatever you want, if you have already prepared js bundles with all deps and your app, just static files with index.html, css, js, jpg files and so on..
I will also recommend you to go with Oleg Barinov.More over Angular2 applications only consist of static files so they can be serve by any static Web servers or server applications that can define static folders (Express, ...)