Use locally installed modules with npm

Dear fellows,

Today, I will explain why and how use locally installed modules.

You must know, there are two ways to install modules with npm : globally and locally.
By globally, I mean the module will be available for your whole machine. Locally, the module is available in your project.

This is how you install a module globally :

 npm install -g webpack  

And this is how you install a module only in the project you are actually browsing :

 npm install --save-dev webpack 

So, why should you not install and use a globally installed module ?
There are severals reasons, but the most relevant is, of course, about sharing your project with other developers. If you need a specific version of Webpack or TypeScript (or whatever) for your project, and you use your globally installed version of this tool, another developer has chances to never make it run easily because he won’t have the good version of the module in the project.

To use a locally installed module, you can’t just run

 webpack 

in your Terminal. You have to tell npm you want to use a local module.

Before that, you also have to know that when you install a module locally with npm, it creates a kind of launch file in node_modules/.bin folder. We will use this, with, for this blog post, webpack-dev-server.

To do that, open the package.json, and locate the « scripts » part.
By default, there is already a « test » line. Add a « start » line, following this :


"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "./node_modules/.bin/webpack-dev-server"
},

Capture d’écran 2016-11-13 à 14.53.05.png

Now, browsing the project’s folder, you can run webpack-dev-server with

 npm start 

Capture d’écran 2016-11-13 à 14.55.45.png

I’ve done several tests, and it seems that if your modules need some dependences and is running locally, npm will use local dependencies.

As usual, if you have any question, do not hesitate !

Publicités

Simplify your TypeScript SharePoint Developer life with WebPack Server

Dear fellows,

After my last post about developing on SharePoint with TypeScript, I’ve worked a lot, and shared a lot ; especially with Sébastien Levert, during the aOS Roatrip in South Africa.

I’ve also delivered my first SharePoint dev project without Visual Studio. I should write a blog post about PnP Provisioning Engine… This tool is awesome.

So, in my previous post, I used different tools to transpile, bundle and serve. This is over. Sébastien explained me that I should use WebPack Server, and I did it. This tool is awesome : it watches for your changes in TS files, it transpiles it when TS files are edited, bundles it and is also a web server !

It works perfectly with the TypeScript framework PnP-JS-Core !

Please note that you should NOT use WebPack Server in a production environnement, it’s only for development purpose.

How should you use it ?

  1. Create a new folder for your project
  2. Run
    npm init
  3. Install the following packages :
    npm install --save-dev webpack
    npm install --save-dev webpack-dev-server
    npm install --save-dev typescript
    npm install --save-dev ts-loader
    
  4. In the scripts of the « package.json », add this line :
    "start": "./node_modules/.bin/webpack-dev-server"

    Capture d’écran 2016-11-12 à 23.14.42.png
    Note that I will write a short blog post about this « start » command, and why you  should never install a package globally.

  5. Create a webpack.config.js file, and add this code :
    module.exports = {
     entry: 'PATH TO YOUR ENTRY',
     output: {
     filename: './app/dist/bundle.js'
     },
     resolve: {
     extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
     },
     module: {
     loaders: [
     { test: /\.ts$/, loader: 'ts-loader' }
     ]
     }
    }
    

    Capture d’écran 2016-11-12 à 23.17.21.png

  6. Don’t forget to add a TypeScript file to transpile and a html page which call your bundle.js
  7. In your Terminal (on a Mac), in your project directory, just run
     npm start 

    WebPack will do the job of transpiling your TS file, and WebPack Server will provide you your web app on the following address : http://localhost:8080/webpack-dev-server/

    Capture d’écran 2016-11-12 à 23.23.20.png

  8. If you edit your TypeScript file and save it, Webpack will re-transpile it, and re-bundle it !Et voilà ! If you have any question, please do not hesitate !