Cannot GET / on localhost:3000 - npm

Question

I had this problem with the browser only showing Cannot GET / when executing Gulp .

Answer 1

It turns out, gulp seems a bit flaky and needs a bit of nurturing before it starts working.
This is purely to help get it working. It may be over kill, but if you just want to see it working, this helped me.
The original tutorial https://coursetro.com/posts/code/130/Learn-Bootstrap-4-Final-in-2018-with-our-Free-Crash-Course gave me a few of these issues with an already, pre installed, npm.
I found a few sites that I though might help:
https://www.npmjs.com/package/gulp
It might be worth rewriting the gulpfile.js with the option in the above link just to get the additional dependences. You can change it back later.
If you're here just copying code, you might want to add these dependancies:
npm install gulp
npm install gulp-coffee
npm install gulp-concat
npm install gulp-uglify
npm install gulp-imagemin
npm install gulp-sourcemaps
There's also this link that might help, that has the gulp-cli
npm install --global gulp-cli
npm install --save-dev gulp
Make sure you have the package.json file in the root folder [bs4]. Also make sure you name the additional directories correctly, inside the src folder.
So you should have:
Root directory [bs4]
Inside the root: [src] , gulpfile.js
The gulpfile.js looks like below:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
.pipe(sass())
.pipe(gulp.dest("src/css"))
.pipe(browserSync.stream());
});
// Move the javascript files into our /src/js folder
gulp.task('js', function() {
return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/umd/popper.min.js'])
.pipe(gulp.dest("src/js"))
.pipe(browserSync.stream());
});
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./src"
});
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], ['sass']);
gulp.watch("src/*.html").on('change', browserSync.reload);
});
gulp.task('default', ['js','serve']);
change directory into $ cd bs4
Add your package.json with npm init -y
Then install npm
Then: npm install bootstrap jquery popper.js --save
Then install gulp globally: npm install gulp -g browser-sync gulp-sass --save-dev
Add your index.html file (make sure you copy the html file as it is written on coursetro.com)
You should end up with a file system like this image:
Then try running: gulp
After running Gulp, you should end up with a file system like this image with styles.css automatically added to the css folder:
(I added the .map files just because Safari was throwing up the error that it couldn't find them).
Also! Make sure you add the write a styles.scss (not styles.css) file and add it to the scss folder
If like me you run into npm errors, try uninstalling npm and the dependences, reboot and install again. If you're patient, it will start to work. For an additional 15 mins rework, it's worth it.
Lastly, before you run gulp. Make sure you send the shell from bs4
$yourCPU:bs4 username$ gulp