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 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"
}
}
H5BP is pretty flexible, so there are a few ways to do what you want to do. You can:
node_modules/html5-boilerplate
up 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.node_modules/html5-boilerplate
So, instead of <link rel="stylesheet" href="css/main.css">
you would do <link rel="stylesheet" href="node_modules/html5-boilerplate/css/main.css">
npm install --save-dev lite-server
inside 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.