Search code examples
npmpackage.jsonnpm-scriptshtml5boilerplate

How to get npm lite server serve full content of my webpage?

I installed html5-boilerplate and the lite-server modules using npm install html5-boilerplate --save-dev and npm install lite-server --save-dev respectively.

I had to copy index.html from the node_modules folder in order to serve up the content using npm start. All I see is the <p> tag being rendered as shown in this image.

this image

This is how my working directory looks like.

Directory of D:\Full_Stack_Web_Development

27-02-2019  09:58    <DIR>          .
27-02-2019  09:58    <DIR>          ..
27-02-2019  10:05             1,871 index.html
27-02-2019  09:55    <DIR>          node_modules
27-02-2019  09:55           125,319 package-lock.json
27-02-2019  09:57               739 package.json
               3 File(s)        127,929 bytes
               3 Dir(s)  213,613,010,944 bytes free

D:\Full_Stack_Web_Development>

and this is how my package.json file looks like. index.html can be viewed here 

{
  "name": "full_stack_web_development",
  "version": "1.0.0",
  "description": "beginning front end development using html5 boilerplate",
  "main": "index.html",
  "scripts": {
    "start": "npm run lite",
    "test": "echo \"Error: no test specified\" && exit 1",
    "lite": "lite-server"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/alokananda-y/Full_Stack_Web_Development.git"
  },
  "author": "alokananda y",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/alokananda-y/Full_Stack_Web_Development/issues"
  },
  "homepage": "https://github.com/alokananda-y/Full_Stack_Web_Development#readme",
  "devDependencies": {
    "html5-boilerplate": "^7.0.1",
    "lite-server": "^2.4.0"
  }
}
Solution

  • H5BP is pretty flexible, so there are a few ways to do what you want to do. You can:

    1. Copy the entire contents of node_modules/html5-boilerplateup to the root level of your folder, not just the index.html. The basic folder structure you're aiming for is what we have in our dist folder.
    2. You can change all of the links in the index.html to point to the h5bp resources in node_modules/html5-boilerplateSo, instead of <link rel="stylesheet" href="css/main.css"> you would do <link rel="stylesheet" href="node_modules/html5-boilerplate/css/main.css">
    3. The easiest is actually to download the latest version, unzip the folder and then run npm install --save-dev lite-serverinside that folder. That way the only dependency would be lite-server and h5bp would be ready to go. This is what I would do. We offer the project via npm but it's not really a dependency in the way that other packages are it's the starting point for a whole site or application.