Can't get / on localhost:3000

As it turns out, the gum seems to be a bit flaky and needs some nurture to start working.

Purely to help it work properly. It may have been killed, but if you just want to see if it works, 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 some of these issues, installed, npm.

I found some sites that I might be able to help: https://www.npmjs.com/package/gulp It might be worth rewriting the gulpfile.js in the link above for more dependencies. You can change it later.

If you're just copying the code here, you might want to add the following dependencies:

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 a link that might be useful, including gulp-cli

npm install --global gulp-cli
npm install --save-dev gulp

Make sure you have package.json file in root folder [bs4]. Also, make sure to name the other directories correctly inside the src folder.

So you should have:

Root directory [bs4] Inside the root directory: [src], gulpfile.js

gulpfile.js looks like this:

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 to$ cd bs4

Add your package.json withnpm init -y

Theninstall 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 written on coursetro.com)

You should end up with a filesystem similar to this image:

Then try to run:gulp

After running Gulp, you should end up with a filesystem like this image, where styles.css is automatically added to the css folder:

(I added the .map files only because Safari threw errors that they couldn't be found).

and also! Make sure to add the write style. scss (not styles.css) file and add it to the scss folder

If you get npm errors like me, try uninstalling npm and its dependencies, restarting and reinstalling. If you are patient, it will start working. Another 15 minutes of rework is worth it.

Finally, before running. make sure you send the shell from bs4

$ yourCPU: bs4 username $gulp