learnwebcode / vagrant-lamp

Brad's Vagrant LAMP Dev Environment

Before moving ahead with this starter environment you'll need to have a few things installed on your computer:

• VirtualBox - Free tool that allows you to run virtual machines on your computer.
• Vagrant - Free tool that automates the creation of development environments within a virtual machine.

Once you've installed VirtualBox and Vagrant on your computer you're ready to continue:

1. Open a command-line (Terminal on Mac, PowerShell or Git Bash on Windows)
2. cd into this project's root folder
3. Run vagrant up
4. Go grab a coffee, it will take a few minutes
5. Once it completes you'll need to edit your computer's hosts file to point fictional-university.test to our virtual machine. On Windows your host file lives in C/Windows/System32/Drivers/etc on Mac your hosts file lives in /etc
6. Add this line at the bottom of your hosts file: 192.168.56.101 fictional-university.test
7. Now you can visit fictional-university.test in any browser. The root of this project is /fictional-university/app

Database Info

An initial database is automatically created for you.

Database name: dbname

Database user: dbuser

User Password: 123

Database hostname: localhost

Managing Databases

This box does not include PhpMyAdmin. Instead I recommend using Seqeul Pro (on Mac) and HeidiSQL (on Windows). Here are the settings you can use to connect.

MySQL Host: 127.0.0.1

Username: dbuser

Password: 123

SSH Host: 192.168.56.101

SSH User: vagrant

SSH Key: point towards the file that lives in our project folder under puphpet/files/dot/ssh/id_rsa

Automated Workflow (PostCSS, webpack, BrowserSync, etc...)

That's technically all you need to get your LAMP development environment up and running. However, my setup also leverages a few workflow tools. If you'd like to take full advantage of my setup you'll also want to install:

• Node & NPM - Node is a free tool that can run JavaScript outside the context of a web browser.
• webpack - Free tool that bundles up multiple files.
• Gulp - Free task-runner tool. No longer the cool kid on the block (webpack owns that title now) but I still prefer Gulp for generic task running and non-bundle'ish tasks.

vagrant-lamp's Issues

gulp

Gulp Watch for php files

I think in gulpfile.js
gulp.watch('./**/.php', function() {
browserSync.reload();
});
this should replace with
gulp.watch(settings.themeLocation + '**/.php', function() { ... });

Gulp only refreshes once on PHP file update, not at all on CSS changes

Working in a WAMP environment (Windows 10, PHP 7.1, Node v8.11.3, Gulp v2.0.1); running the fictional university lesson, section 7; the setup worked fine, but after the automatic reload after a PHP worked only once. Fixed this by added a done(); command after reload:
gulp.watch('./**/*.php', function() { browserSync.reload(); done(); });
See https://stackoverflow.com/questions/29801070/gulp-browser-sync-only-works-once
To fix the CSS I added a semi-colon after the cb() command in the waitforscripts task:
gulp.task('waitForScripts', gulp.series('scripts', function(cb) { browserSync.reload(); cb(); }))

Failing to install ubuntu1604-x64

This site can’t provide a secure connection.

Gulp is not working as expected. When I run gulp watch command after a few seconds it automatically opens the browser tab on localhost:3000 but gives me This site can’t provide a secure connection error and does not work.
I followed all the instructions as you said step by step but that is not working.
I think that is because the packages deprecations in package.json, because as I was installing the the dependencies, there were lot's of errors and warning of deprecated files and packages.
please update the files and package.json file.
thanks...

Upgrade to fsevent v2 - Node 13 support

npm WARN deprecated [email protected]: One of your dependencies needs to upgrade to fsevents v2: 1) Proper nodejs v10+ support 2) No more fetching binaries from AWS, smaller package size
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

Consider adding MQPacker

Consider adding MQPacker plugin ?

I want advice modifying gulpfile.js

I downloaded your repo but wasn't working for me so I modified it like this please confirm will this work fine?

modified gulpfile.js

var gulp = require('gulp'),
    settings = require('./settings'),
    webpack = require('webpack'),
    browserSync = require('browser-sync').create(),
    postcss = require('gulp-postcss'),
    rgba = require('postcss-hexrgba'),
    autoprefixer = require('autoprefixer'),
    cssvars = require('postcss-simple-vars'),
    nested = require('postcss-nested'),
    cssImport = require('postcss-import'),
    mixins = require('postcss-mixins'),
    colorFunctions = require('postcss-color-function');

// compile sass into css
function style() {
  // 1. where is my scss file
  return gulp.src(settings.themeLocation + 'css/style.css')
      // 2. pass that file through scss compiler
      .pipe(postcss([cssImport, mixins, cssvars, nested, rgba, colorFunctions, autoprefixer]))
      // 3. where do I save the compiled css?
      .pipe(gulp.dest(settings.themeLocation))
      // .pipe(gulp.dest('./css'))
      // 4. stream changes to all browser
      .pipe(browserSync.stream());
}

function scripts(cb) {
  webpack(require('./webpack.config.js'), function(err, stats) {
    if (err) {
      console.log(err.toString());
    }

    console.log(stats.toString());
    callback();
  });
}

function watch() {
    browserSync.init({
      notify: true,
      proxy: settings.urlToPreview,
      ghostMode: false
    });
    // for loading scss files
    gulp.watch(settings.themeLocation + 'css/**/*.css', style);
    // for loading html files
    gulp.watch('./*.html').on('change', browserSync.reload);
    // for loading php files
    gulp.watch('./**/*.php').on('change', browserSync.reload);
    // for loading js files
    gulp.watch([settings.themeLocation + 'js/modules/*.js', settings.themeLocation + 'js/scripts.js']).on('change', browserSync.reload);
}

exports.style = style;
exports.scripts = scripts;
exports.watch = watch;

---

Your reponse will be highly appreciable.

Gulp doesn't refresh on JS changes

I'm using Local by Flywheel, and getting the following error

Hash: 82a1e368990dd1981308
Version: webpack 4.44.1
Time: 9259ms
Built at: 08/04/2020 9:01:24 AM
             Asset      Size  Chunks             Chunk Names
scripts-bundled.js  92.7 KiB     App  [emitted]  App
Entrypoint App = scripts-bundled.js
[./node_modules/@glidejs/glide/dist/glide.esm.js] 78.4 KiB {App} [built]
[./wp-content/themes/fictional-university-theme/css/style.css] 372 bytes {App} [built] [failed] [1 error]
[./wp-content/themes/fictional-university-theme/js/modules/HeroSlider.js] 1000 bytes {App} [built]
[./wp-content/themes/fictional-university-theme/js/modules/MobileMenu.js] 1.45 KiB {App} [built]
[./wp-content/themes/fictional-university-theme/js/scripts.js] 409 bytes {App} [built]

ERROR in ./wp-content/themes/fictional-university-theme/css/style.css 2:0
Module parse failed: Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /* 3rd party packages */
> @import "normalize.css";
| @import "../node_modules/@glidejs/glide/dist/css/glide.core.min.css";
| 
 @ ./wp-content/themes/fictional-university-theme/js/scripts.js 1:0-26

Gulp is not changing css and js

Hi I am using xampp and css and js is not changing