Add Concurrently and Browsersync for live reload (#21)

* Add Concurrently and BrowserSync for live reload

* Add yarn install step to bridgtown new

* Add documentation and script config options

* Update scripts in new site template

.prettierignore

@@ -1,2 +1,4 @@
 *.md
 *.html
+*.js
+*.liquid

bridgetown-core/lib/bridgetown-core/commands/new.rb

@@ -15,6 +15,7 @@ def init_with_program(prog)
 
             c.option "force", "--force", "Force creation even if PATH already exists"
             c.option "skip-bundle", "--skip-bundle", "Skip 'bundle install'"
+            c.option "skip-yarn", "--skip-yarn", "Skip 'yarn install'"
 
             c.action do |args, options|
               Bridgetown::Commands::New.process(args, options)
@@ -109,32 +110,41 @@ def scaffold_path
           "src/_posts/0000-00-00-welcome-to-bridgetown.md.erb"
         end
 
-        # After a new blog has been created, print a success notification and
-        # then automatically execute bundle install from within the new blog dir
-        # unless the user opts to generate a blank blog or skip 'bundle install'.
-        # rubocop:disable Metrics/AbcSize #
+        # After a new site has been created, print a success notification and
+        # then automatically execute bundle install from within the new site dir
+        # unless the user opts to skip 'bundle install'.
+        # rubocop:disable Metrics/AbcSize, Metrics/MethodLength #
         def after_install(path, cli_path, options = {})
-          unless options["blank"] || options["skip-bundle"]
+          logger = Bridgetown.logger
+          git_init path
+
+          unless options["skip-bundle"]
             begin
               require "bundler"
               bundle_install path
             rescue LoadError
-              Bridgetown.logger.info "Could not load Bundler. Bundle install skipped."
+              logger.info "Could not load Bundler. Bundle install skipped."
             end
           end
 
-          git_init path
+          yarn_install path unless options["skip-yarn"]
+
+          yarn_start = "yarn start"
 
-          Bridgetown.logger.info "Success!".green, "🎉 Your new Bridgetown site was" \
-                                  " generated in #{cli_path.cyan}."
-          Bridgetown.logger.info "Execute cd #{cli_path.cyan} to get started."
-          Bridgetown.logger.info "You'll probably also want to #{"yarn install".cyan}" \
-                                  " to load in your frontend assets."
-          Bridgetown.logger.info "Check out our online documentation for" \
-                                  " next steps: #{DOCSURL.cyan}"
-          Bridgetown.logger.info "Bundle install skipped." if options["skip-bundle"]
+          logger.info "Success!".green, "🎉 Your new Bridgetown site was" \
+                      " generated in #{cli_path.cyan}."
+          if options["skip-yarn"]
+            logger.info "You can now #{"cd".cyan} #{cli_path.cyan} to get started."
+            logger.info "You'll probably also want to #{"yarn install".cyan}" \
+                        " to load in your frontend assets."
+          else
+            logger.info "You can now #{"cd".cyan} and run #{yarn_start.cyan} to get started."
+          end
+          logger.info "Then check out our online documentation for" \
+                      " next steps: #{DOCSURL.cyan}"
+          logger.info "Bundle install skipped." if options["skip-bundle"]
         end
-        # rubocop:enable Metrics/AbcSize #
+        # rubocop:enable Metrics/AbcSize, Metrics/MethodLength #
 
         def bundle_install(path)
           Bridgetown.logger.info "Running bundle install in #{path.cyan}..."
@@ -159,6 +169,22 @@ def git_init(path)
           end
         rescue SystemCallError
         end
+
+        def yarn_install(path)
+          Bridgetown.logger.info "Running yarn install in #{path.cyan}..."
+          Dir.chdir(path) do
+            _process, output = Bridgetown::Utils::Exec.run("yarn", "install")
+            output.to_s.each_line do |line|
+              next if line.to_s.empty? ||
+                line.strip.start_with?("warning ") ||
+                line.include?("No lockfile found")
+
+              Bridgetown.logger.info("Yarn:".green, line.strip)
+            end
+          end
+        rescue SystemCallError
+          Bridgetown.logger.info "Could not load yarn. yarn install skipped."
+        end
       end
     end
   end

bridgetown-core/lib/site_template/package.json

@@ -3,16 +3,22 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "build": "webpack --mode production",
-    "deploy": "yarn build && bundle exec bridgetown build",
-    "dev": "webpack --mode development -w"
+    "build": "bundle exec bridgetown build",
+    "serve": "bundle exec bridgetown serve",
+    "webpack-build": "webpack --mode production",
+    "webpack-dev": "webpack --mode development -w",
+    "deploy": "yarn webpack-build && yarn build",
+    "sync": "node sync.js",
+    "start": "node start.js"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-transform-runtime": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
     "babel-loader": "^8.1.0",
+    "browser-sync": "^2.26.7",
+    "concurrently": "^5.2.0",
     "css-loader": "^3.4.2",
     "file-loader": "^6.0.0",
     "mini-css-extract-plugin": "^0.9.0",

bridgetown-core/lib/site_template/start.js

@@ -0,0 +1,17 @@
+const concurrently = require('concurrently');
+
+// By default, configure Bridgetown to use port 4001 so Browsersync can use 4000
+// See also Browsersync settings in sync.js
+const port = 4001
+
+/////////////////
+// Concurrently
+/////////////////
+concurrently([
+  { command: "yarn webpack-dev", name: "Webpack", prefixColor: "yellow"},
+  { command: "sleep 4; yarn serve --port " + port, name: "Bridgetown", prefixColor: "green"},
+  { command: "sleep 8; yarn sync", name: "Live", prefixColor: "blue"}
+], {
+  restartTries: 3,
+  killOthers: ['failure', 'success'],
+}).then(() => {}, () => {});

bridgetown-core/lib/site_template/sync.js

@@ -0,0 +1,35 @@
+const browserSync = require("browser-sync").create();
+
+// You can change these configuration values:
+const proxy = "http://localhost:4001"
+const port = 4000
+const uiPort = 4002
+
+////////////////
+// Browsersync
+////////////////
+browserSync.init({
+  open: false,
+  notify: false,
+  proxy: proxy,
+  port: port,
+  files: "output/index.html",
+  ghostMode: {
+    clicks: false,
+    forms: false,
+    scroll: false,
+  },
+  reloadDelay: 0,
+  injectChanges: false,
+  ui: {
+    port: uiPort
+  },
+  snippetOptions: {
+    rule: {
+      match: /<\/head>/i,
+      fn: function (snippet, match) {
+        return snippet + match;
+      },
+    },
+  },
+});

bridgetown-core/script/update-site-template

@@ -0,0 +1,9 @@
+#! /usr/bin/env bash
+
+set -e
+
+# Copy files from the website to update the CLI site template
+cp ../bridgetown-website/start.js ../bridgetown-website/sync.js ../bridgetown-website/webpack.config.js lib/site_template
+cat ../bridgetown-website/package.json | sed 's/bridgetown-website/new-bridgetown-site/' > lib/site_template/package.json
+echo "$0: Done!"
+echo "$0: ***Don't forget to strip out extra Yarn dependencies in package.json!!!"

bridgetown-core/test/test_new_command.rb

@@ -22,6 +22,7 @@ def site_template_source
     setup do
       @path = "new-site"
       @args = [@path]
+      @options = "--skip-yarn"
       @full_path = File.expand_path(@path, Dir.pwd)
       @full_path_source = File.expand_path("src", @full_path)
     end
@@ -30,27 +31,27 @@ def site_template_source
       FileUtils.rm_r @full_path if File.directory?(@full_path)
     end
 
-    should "create a new directory" do
-      refute_exist @full_path
-      capture_output { Bridgetown::Commands::New.process(@args) }
-      assert_exist @full_path
-    end
-
-    should "create a Gemfile" do
+    should "create a new folder with Gemfile and package.json" do
       gemfile = File.join(@full_path, "Gemfile")
+      packagejson = File.join(@full_path, "package.json")
       refute_exist @full_path
-      capture_output { Bridgetown::Commands::New.process(@args) }
+      capture_output { Bridgetown::Commands::New.process(@args, @options) }
       assert_exist gemfile
+      assert_exist packagejson
       assert_match(%r!gem "bridgetown", "~> #{Bridgetown::VERSION}"!, File.read(gemfile))
+      assert_match(%r!"start": "node start.js"!, File.read(packagejson))
     end
 
     should "display a success message" do
-      output = capture_output { Bridgetown::Commands::New.process(@args) }
+      output = capture_output { Bridgetown::Commands::New.process(@args, @options) }
       success_message = "Your new Bridgetown site was generated in" \
                         " #{@args.join(" ").cyan}."
       bundle_message = "Running bundle install in #{@full_path.cyan}... "
+      skipped_yarn_message = "You'll probably also want to #{"yarn install".cyan}"
+
       assert_includes output, success_message
       assert_includes output, bundle_message
+      assert_includes output, skipped_yarn_message
     end
 
     should "copy the static files in site template to the new directory" do
@@ -59,7 +60,7 @@ def site_template_source
       end
       static_template_files << "/Gemfile"
 
-      capture_output { Bridgetown::Commands::New.process(@args) }
+      capture_output { Bridgetown::Commands::New.process(@args, @options) }
 
       new_site_files = dir_contents(@full_path).reject do |f|
         f.end_with?("welcome-to-bridgetown.md")
@@ -81,7 +82,7 @@ def site_template_source
         f.gsub! "0000-00-00", stubbed_date
       end
 
-      capture_output { Bridgetown::Commands::New.process(@args) }
+      capture_output { Bridgetown::Commands::New.process(@args, @options) }
 
       new_site_files = dir_contents(@full_path_source).select do |f|
         erb_template_files.include? f
@@ -91,13 +92,17 @@ def site_template_source
     end
 
     should "force created folder" do
-      capture_output { Bridgetown::Commands::New.process(@args) }
-      output = capture_output { Bridgetown::Commands::New.process(@args, "--force") }
+      capture_output { Bridgetown::Commands::New.process(@args, @options) }
+      output = capture_output { Bridgetown::Commands::New.process(@args, @options + " --force") }
       assert_match %r!new Bridgetown site was generated in!, output
     end
 
     should "skip bundle install when opted to" do
-      output = capture_output { Bridgetown::Commands::New.process(@args, "--skip-bundle") }
+      output = capture_output do
+        Bridgetown::Commands::New.process(
+          @args, @options + " --skip-bundle"
+        )
+      end
       bundle_message = "Bundle install skipped."
       assert_includes output, bundle_message
     end
@@ -107,6 +112,7 @@ def site_template_source
     setup do
       @site_name_with_spaces = "new site name"
       @multiple_args = @site_name_with_spaces.split
+      @options = "--skip-yarn"
     end
 
     teardown do
@@ -115,7 +121,7 @@ def site_template_source
 
     should "create a new directory" do
       refute_exist @site_name_with_spaces
-      capture_output { Bridgetown::Commands::New.process(@multiple_args) }
+      capture_output { Bridgetown::Commands::New.process(@multiple_args, @options) }
       assert_exist @site_name_with_spaces
     end
   end

bridgetown-website/package.json

@@ -3,16 +3,22 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "build": "webpack --mode production",
-    "deploy": "yarn build && bundle exec bridgetown build",
-    "dev": "webpack --mode development -w"
+    "build": "bundle exec bridgetown build",
+    "serve": "bundle exec bridgetown serve",
+    "webpack-build": "webpack --mode production",
+    "webpack-dev": "webpack --mode development -w",
+    "deploy": "yarn webpack-build && yarn build",
+    "sync": "node sync.js",
+    "start": "node start.js"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-transform-runtime": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
     "babel-loader": "^8.1.0",
+    "browser-sync": "^2.26.7",
+    "concurrently": "^5.2.0",
     "css-loader": "^3.4.2",
     "file-loader": "^6.0.0",
     "mini-css-extract-plugin": "^0.9.0",

bridgetown-website/src/_components/docs/install/bridgetown.liquid

@@ -6,24 +6,19 @@ Now all that is left is to install Bridgetown!
 gem install bridgetown -N
 ```
 
-Now, try to create a new Bridgetown site at `./mysite`:
+Create a new Bridgetown site at `./mysite`, as well as run `bundle install` and
+`yarn install` automatically:
 
 ```sh
 bridgetown new mysite
-cd mysite
-```
-
-Install additional Bridgetown gems and frontend dependencies:
 
-```sh
-$ bundle install
-$ yarn install
+cd mysite
 ```
 
-Now you should be able to build the site and make it available on a local server:
+Now you should be able to build the site and run a live-reload server:
 
 ```sh
-$ yarn build && bundle exec bridgetown serve
+$ yarn start
 ```
 
 Try opening the site up in [http://localhost:4000](http://localhost:4000){:target="_blank"}. See something? Awesome, you're ready to roll! If not, try revisiting your installation and setup steps, and if all else fails, [reach out to the Bridgetown community for support](/docs/community/).

bridgetown-website/src/_components/docs/install/concurrently.liquid

@@ -0,0 +1,6 @@
+{% rendercontent "docs/note" title: "Top Top: Adding Concurrently Processes" %}
+Want to run even more background processes or change up your build tools? Take a look
+at the provided `sync.js` script and read up on the
+[Concurrently](https://github.com/kimmobrunfeldt/concurrently#readme) documentation to
+see which options are available.
+{% endrendercontent %}

bridgetown-website/src/_components/docs/install/node_on_linux.liquid

@@ -1,6 +1,9 @@
 ## Install Node and Yarn
 
-Node is a Javascript runtime that can execute on a server or development machine. Yarn is a package manager for Node packages. You'll need Node and Yarn in order to install and use Webpack, the frontend asset compiler that runs alongside Bridgetown.
+Node is a Javascript runtime that can execute on a server or development machine. Yarn
+is a package manager for Node packages. You'll need Node and Yarn in order to install
+and use Webpack, the frontend asset compiler that runs alongside Bridgetown. Yarn is also used along with Concurrently and Browsersync to spin up a live-reload development
+server.
 
 ```shell
 curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -