Hi I'm developing a project and for some reasons I am not able to use any webpack and node modules. I also cannot use any cdn. The vue project will only contain client side components. I don't have to consider the backend part, routing etc. The size of the project matters so I am not allowed to use node modules. How can I create a client-side only vue project without node modules and npm?
You can download Vue.js and use it locally in a project.
Development version (with debug mode and all warnings).
Production version (no warnings no debug)
After that you can just add it via a script tag:
<script src="your-vue-directory/vue.js"></script>
And you ready to go.
According to docs you can use CDN
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12"></script>
Related
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.
I am a Beginner to Angular technology and came across this question.
why is Node js needed in Angular as Node js is a backend technology?
You need NodeJs for angular if you intend to create a front end server, use typescript or make anything other than a purely in browser application(unless you use another server framework: Apache, nginx, lighttp, ruby/rails etc.). For example Vanilla javascript does not support require or import functionality so you need node to load file dependencies, and angularjs does not allow for server creation on its own. You can also choose to build angular applications in TypeScript which utilises NodeJs.
It is worth noting that technically speaking nodejs and angularjs are separate frameworks, angular can be run without node but would only support limited functionality(no db access, no server etc).
The CLI is needed in order to run angular commands through the command line, to generate services / components etc.
You can read more about angular here
Angular does not need Node. However to make the dependencies management easier especially in package.json , npm which is a package manager is required. And in order to get npm, you need to install Node first.
As for angular cli, it provides a terminal that makes it easy to execute operations like creation of an angular app, angular components, building...
I'm new to Node.js web development. Just created a project using ExpressGenerator (project structure generator for ExpressJS framework).
The question is: if I want to use FineUploader front-end JS library for my application, which is provided through NPM package, how should I embed it into my project properly? package.json manages server-side dependencies. When authors of front-end module publish it as npm, what approach to further usage they imply? Another package manager like Bower?
You are correct that package.json manages server-side dependencies but not entirely. You can - and should - rely on it to manage front-end dependencies as well.
For that to work you will need a module bundler, to package the node module for the browser. Some of the most popular bundlers for accomplishing this include Webpack, browserify, rollup among others.
Also note that you can delegate the bundling of node js modules to cdn services such as unpkg or wzrd so that all you need to do to use a node module in your front end code is include a link in your html to the cdn bundled module
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, ...)