Starting an ExpressJS app using my favourite tools - express

I'm a front end dev who wants make a blog/portfolio site using express js.
I've used codekit in the past to compile,minify & autoprefix my JADE/SASS files, and to minify my JS files, but I have no idea where to start when going full stack. I've been reading up on gulp (as I assume this will do all the things that codekit does) but I don't understand fully what I need.
Do I need bower aswell? Do I control all the gulp plugins using NPM?
How do I get all this to work with Zurb Foundation 6?

If you are planning to use Express, then Gulp is a good choice. Like you said, gulp can automatically do all the stuff you need; also is very customizable. You don't need Bower to use it, personally I don't use Bower but I use Gulp. All the packages are managed by Node Package Manager (npm). Finally I don't know about support of Zurb Foundation 6. By a quick research I see there is a npm plugin for version 5, but I think there's not one for version 6.
Here's a link with all npm packages and a guide to begin using Gulp:
https://css-tricks.com/gulp-for-beginners/
https://www.npmjs.com/
I hope my answer help you.

Related

Best way to import Javascript packages in .NET core app

I'm new to the .NET Core framework and currently setting up a dashboard that uses Razor pages and some JavaScript interactions. For the few example projects I've created none of them came with a package manager from the get go, which imho is needed to keep the application maintainable. Coming from Node.js an Ruby on Rails background my default solution is NPM (or Yarn if you want).
I noticed however that Microsoft excluded Node from their base Docker images for .Net about 2 years ago (see here: https://github.com/aspnet/Announcements/issues/298).
This led me to questioning my solution to use NPM and I went looking for alternatives. I found that you can install Javascript libraries by wrapping them in Nuget packages and installing them via Nuget. But I'm hesitant to go this way as I've seen this pattern causing issues in Ruby on Rails. It adds an extra layer of maintenance and often the Ruby Gems where no longer maintained, meaning you're unable to move to the newest versions.
Then we have Libman, which is integrated into Visual Studio (https://learn.microsoft.com/en-us/aspnet/core/client-side/libman/libman-vs?view=aspnetcore-2.2) and draws packages from https://cdnjs.com, which I believe contains less packages (but according to Microsoft has everything you need). But their own blog (https://devblogs.microsoft.com/aspnet/library-manager-client-side-content-manager-for-web-apps/) says:
LibMan is not a package management system. If you’re happily using npm/yarn/(or something else), we encourage you to continue doing so. LibMan was not developed as a replacement for these tools. For example, the SPA templates (i.e. Angular and React) we ship for ASP.NET Core depend on npm and WebPack, and we have no plans to change that.
Then we're left with Bower, which is no longer an option, from https://bower.io/:
...psst! While Bower is maintained, we recommend using Yarn and Webpack or Parcel for front-end projects read how to migrate!
So I wonder, for a monolith app, is NPM or Yarn still the right choice and if so, why did Microsoft decide to exclude Node from their base images?
You mentioned LibMan which works just fine, but you need to configure it to download packages from unpkg which is a CDN for NPM and should contain everything that you can find on npm.

I need a bower alternative

I am working on a project with dotnet core, in Linux and it is using MVC.
I am reading a book for learning how to put things together. The book advises installing Bower. But the last time I researched bower I believe they were advising towards using something else for new projects.
I would like to know what alternative I can use for front end management. I need to be able to use Bootstrap, Jquery, Popper and Datatables on my page. And of course, I should be able to use it in Linux.
Thanks for the help francium. NPM is working just fine.It is in the official Ubuntu repository. You have to install popper the following way though: npm install popper.js --save
If you don't specify the .js extension it will give you a warning saying that bootstrap requires a popper installation but it was not installed. You also have to install git on your machine to make it work. I did not do it the first time I ran it and it gave me an error asking me if it was installed. Thanks for the suggestion, It was relatively easy to do get things working.
Yarn is now the alternative to Bower, but to install Yarn you need to use NPM

NPM to existing project?

I have an online site and Im going to overhaul it. While I cannot find any information about if I can use npm and some kind of package manager (e.g Webpack) on live site which is on shared host (which has latest Node.js, npm support etc), Im going to develope it locally and worry about "publishing" it later on.
Is there a way to somehow covert my current downloaded project to npm project or Im better off just starting a new project? This is rather confusing, I've never used npm before.
Im using WordPress, everything is run with PHP atm but Im going to overhaul it and use Node.js.
NPM can be used to collect and manage Javascript dependencies for the browser so as to create a stand alone front-end JS app. BUT, bower is probably a better choice.
NPM is designed to manage Javascript dependencies for projects that use NodeJS or use the CommonJS module format for requiring modules.
Bower is specifically a package manager (like npm or composer) but it is meant to manage browser based javascript dependencies.
Currently, javascript doesn't have a formally defined module/import system, so a number of competing require() functions are been produced. NodeJS comes with a require() function that searches the npm/ folder for modules. Browserify is a pre-processor that can scan the npm folder for a dependency and all of its dependencies and bundle them into 1 file for a browser to download (because browser's don't have a require() function because the JS standard doesn't have define one)
I might be rambling here, but you should probably look at bower, and then - at some point in the future - look at either browserify or requirejs to combine and optimize all the JS plugins for your front-end app.
Edit for clarity:
Basically there are 2 engines to run your JS application: the browser or NodeJS. NodeJS needs npm, the browser has no idea what npm is. If you want to write a clean, single page app, all JS front-end for a PHP backend, you don't need NodeJS, and therefore don't need npm. Using npm will prematurely complicate the development of a front-end browser app because it will force you to decide on a require() implementation (Browserify or Requirejs) right from the start.

Turn a global into an npm, browserify, etc. module

I've built out this simple library https://github.com/FarhadG/script-tag-data and you can either clone it down or install via bower but I'm curious how I should go about turning it into an npm, browserify, etc. module.
Since you already have your project on github, for publishing to npm, you can follow the guide over here : npm-developers
AFAIK, browserify doesn't have a registry. You probably meant bower. Follow this guide : Creating Packages
And maybe use Google search next time, yeah?

NPM/Bower/Composer - differences?

Can someone explain to me the difference between NPM, Bower and Composer.
They are all package managers - correct?
But when should each one be used?
Also, each one appears to have a json file that accompanies it, does this store all the packages you require so they can be installed by cmd line? Why do you need this file?
[update, four years later]
bower is deprecated, and should not be used anymore for new projects. To a large extent, it has been subsumed into node dependency management (from their website: "While Bower is maintained, we recommend using Yarn and Webpack or Parcel for front-end projects").
yarn came out of the wood as a better npm (fixing several of npm flaws), and this is really what you should use now, as it is the new de-facto standard if you are doing front-end or node development. It does consume the same package.json as npm, and is almost entirely compatible with it.
I wouldn't use composer at this point (because I wouldn't use php), although it seems to still be alive and popular
[original answer]
npm is nodejs package manager. It therefore targets nodejs environments, which usually means server-side nodejs projects or command-line projects (bower itself is a npm package). If you are going to do anything with nodejs, then you are going to use npm.
bower is a package manager that aims at (front-end) web projects. You need npm and nodejs to install bower and to execute it, though bower packages are not meant specifically for nodejs, but rather for the "browser" environment.
composer is a dependency manager that targets php projects. If you are doing something with symfony (or plain old php), this is likely the way to go
Summing it up:
doing node? you do npm
doing php? try composer
front-end javascript? try bower
And yes, the "json" files describe basic package information and dependencies. And yes, they are needed.
Now, what about the READMEs? :-)
https://github.com/bower/bower
https://www.npmjs.org/doc/cli/npm.html
https://getcomposer.org/doc/00-intro.md