Webpack instead of ruby pl0x

[maxcr]

I know this is a feature request more than a bug but a bunch of the libraries in dugway are deprecated. Instead of trying to fix the weird errors I've been getting I've been supplementing dugway with webpack which has actually been working pretty well.

/home/maxr/.rvm/gems/ruby-2.5.1/gems/liquid-2.4.1/lib/liquid/htmltags.rb:43: warning: key "index0" is duplicated and overwritten on line 46
/home/maxr/.rvm/gems/ruby-2.5.1/gems/thin-1.5.1/lib/thin/server.rb:104: warning: constant ::Fixnum is deprecated

[nabrown]

Hey @maxcr could you expand on this? dugway is serving my site fine locally, but the build command is failing with a few errors:

/usr/local/lib/ruby/gems/2.5.0/gems/liquid-2.4.1/lib/liquid/htmltags.rb:43: warning: key "index0" is duplicated and overwritten on line 46
/usr/local/Cellar/ruby/2.5.1/lib/ruby/2.5.0/json/common.rb:156:in `initialize': no implicit conversion of nil into String (TypeError)

I see you have one of the same ones. Can you recommend how I could fix them? Do you think it would work if I used an older version of Ruby?

I'm somewhat familiar with Webpack, so with some guidance I could go that route maybe.

Thanks for any ideas.

[maxcr]

Its a meaningless error. Their compiler/builder still consolidates files in the javascripts/stylesheets directory.

Still webpack is fucking amazing albeit a bitch to configure correctly.

require('dotenv').config({
  silent: true
});

const siteJs = ['./_src/js/custom.js'];
// const siteCss = ['./_src/css/style.scss'];
const IS_PRODUCTION = process.env.NODE_ENV === 'production';
const webpack = require('webpack');
const path = require('path');
// Plugins
// const postcssPresetEnv = require('postcss-preset-env');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const TimeFixPlugin = require('time-fix-plugin')

config = {
  performance: {
    hints: false
  },
  devtool: IS_PRODUCTION ? false : 'inline-cheap-module-source-map', // If IS_PRODUCTION == null == false, because I am in production it evals as true

  entry: {
    "scripts": siteJs,
    "scripts.min": siteJs,
    "calendar": './_src/js/calImports.js',
    "calendar.min": './_src/js/calImports.js',
    "lightbox.min": './_src/js/lightbox.js',
    "lightboxStyles.min" : './_src/css/lightboxStyles.scss',
    // "styles": siteCss,
    // "styles.min": siteCss,
    // "calendarStyles": './_src/css/calendar.scss',
    "calendarStyles.min": './_src/css/calendar.scss',
  },

  output: {
    path: path.resolve(__dirname, "./javascripts/"),
    filename: '[name].js'
  },

  module: {
    rules: [{
        test: [/\.sass?$/, /\.scss?$/],
        use: [
          'cache-loader',
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2 // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
            }
          },
          "postcss-loader",
          "sass-loader"
        ]
      },
      // {
      //   test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
      //   use: [{
      //     loader: 'file-loader',
      //     options: {
      //       name: '[name].[ext]',
      //       outputPath: '../fonts/'
      //     }
      //   }]
      // },

      {
        test: /\.(eot|woff|otf|woff(2)?|ttf|svg|png|jpg|gif)$/,
        use: [
          'cache-loader',
          {
            loader: "url-loader",
            options: {
              // limit: 90000,
            }
          },
        ],
        //loader: 'url-loader?limit=40000&name=[name]-[hash].[ext]'
      },
      {
        test: /\.less$/,
        loader: [
          'cache-loader',
          'less-loader'
        ] // compiles Less to C
      },
      {
        test: require.resolve('jquery'),
        use: [{
            loader: 'expose-loader',
            options: '$'
          },
          {
            loader: 'expose-loader',
            options: 'jQuery'
          }
        ]
      },
      {
        test: require.resolve('photoswipe/src/js/ui/photoswipe-ui-default.js'),
        use: [{
          loader: 'expose-loader',
          options: 'PhotoSwipeUI_Default'
        }]
      },
      // {
      //   test: require.resolve('flickity'),
      //   use: [{
      //     loader: 'expose-loader',
      //     options: 'Flickity'
      //   }]
      // },
      {
        test: require.resolve('scrollmagic'),
        use: [{
          loader: 'expose-loader',
          options: 'ScrollMagic'
        }]
      },
      // {
      //   test: require.resolve('gsap'),
      //   use: [{
      //     loader: 'expose-loader',
      //     options: 'TimelineMax'
      //   }, {
      //     loader: 'expose-loader',
      //     options: 'TweenMax'
      //   }]
      // },
    ]
  },

  resolve: {
    modules: [
      path.resolve(),
      'node_modules'
    ],
    alias: {
      'animation.gsap': 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js',
      'jquery.ScrollMagic': 'scrollmagic/scrollmagic/uncompressed/plugins/jquery.ScrollMagic.js',
      'debug.addIndicators': 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js',
      // 'TweenLite': 'gsap/src/minified/TweenLite.min.js',
      // 'TweenMax': 'gsap/src/minified/TweenMax.min.js',
      // 'TimelineLite': 'gsap/src/minified/TimelineLite.min.js',
      // 'TimelineMax': 'gsap/src/minified/TimelineMax.min.js',
      'photoSwipeUI': 'photoswipe/src/js/ui/photoswipe-ui-default.js',
      // "Draggable": path.resolve('node_modules', 'gsap/Draggable.js'),
    }
  },

  plugins: [
    new TimeFixPlugin(),

    // new webpack.SourceMapDevToolPlugin({
    //   exclude: ['scripts.min', 'calendar.min', 'calendarStyles.min', 'scripts.min.css']
    // }),

    new ProgressBarPlugin(),

    new MiniCssExtractPlugin({
      filename: "../stylesheets/[name].css",
      chunkFilename: "../stylesheets/[id].css"
    }),

    new BrowserSyncPlugin({
      // browse to http://localhost:3000/ during development,
      // ./public directory is being served
      host: '127.0.0.1',
      port: 9393,
      // server: { baseDir: ['public'] },
      proxy: 'localhost:9292'
    }, {
      injectCss: true
    }),

    new ExtraWatchWebpackPlugin({
      files: ['./*.html', './*.js', './*.css'],
      dirs: ['./_src/', './stylesheets/']
    })

  ],

  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        include: /\.min\.js$/,
        parallel: 6,
        uglifyOptions: {
          sourceMap: true,
          compress: true,
          output: {
            comments: false
          }
        }
      })
    ]
  }
}

module.exports = config;

That's my build file. If I'm in production it compresses and optimizes CSS and Javascript, adding vendor prefixes and deduping my CSS and JS along the way.

I'm sure if you used an older version of Ruby the error would go away but these tools look like that haven't been touched in about 5ish years. Honestly I'm just building the front end until I can rewrite a backend from scratch using Strongloop, and Stripe. Not to say there's anything wrong with BigCartel, but the lack of features and the long-in-tooth dev tools make me think I shouldn't be trusting them with any mission critical e-commerce for another 5 years.

[johnelliott]

I didn't have any problems installing/running Dugway. I am not a "real" ruby developer so my older pre-installed version of ruby without rbenv may have helped 😆

For other reasons I'm trying my hand at using Webpack also. The most interesting thing on that front that I have found is https://github.com/Shopify/slate.

also: https://github.com/Azeeson/liquid-loader

[maxcr]

Slate is garbage. Why I switched to big cartel. Square Space have much better local Dev tools, but BigCartels are still by far the best.

Liquid is a trash version of handlebars imo. But I think handlebars was only in alpha/didn't even exist when all these e-commerce sites started and it's not like their going to change their stack now.

[nabrown]

@maxcr Ok, off topic now but another site I'm working on is Squarespace-based (not my choice), and since you seem familiar with their dev tools -- when you build your own templates, do you only have control over markup and styles? Or do you actually have programmatic control over data (if/then, loops etc)? And once you depart from an official Squarespace theme, are upgrades manual? Any decent resources/docs on this topic? Thanks in advance if you have time to answer.

[maxcr]

@nabrown square space gives the least control over markup and stiles via css/liquid. But their dev tools are implemented the best. There are certain divs/classes/styles which simply cannot be removed without hacky methods like !important or at all. I probably should have been more clear in saying that Shopify's tools, while buggier, and often dubiously implemented, offer more creative freedom. But not the freedom to the degree that is allowed by BigCartel.

You are not allowed to create logical loops like you can with the liquid syntax of Shopify or BigCartel. Things may have changed since May, since that was the last time I used that platform.

[nabrown]

Interesting -- thanks for the info. Sounds like nobody has come up with the best developer experience when it comes to these "DIY" e-commmerce platforms. I'm already totally frustrated by the limitations of Squarespace (not having tried developing a full theme yet).

[maxcr]

I've been wanting to create a backed that let's people use handlebars. But creating runtimes that are memory safe while handing client credit card numbers isn't easy. Not just that there's so many ways to sploit webapps now... Yeah it's a real pain in the ass

[johnelliott]

I applaud both bigcartel and shopify for even offering tools like Dugway and Slate. I'm grateful to have either. A number of smart people evidently put their best effort into building the tools. 👍

We stopped using bigcartel because 'deploying' by copy/paste into the web editor was to much of a pain: other logged-in users could clobber changes and we had no way to tell what was deployed other than logging out, logging in, downloading and diffing files 🙃

[maxcr]

Yeah I switched to WordPress. I had like 2K lines of JS of features that are standard as part of WordPress. I'll eventually move that JS into a backend that I can incorporate into ghost blog for an eventually fully javascript e-commerce code base with all the bells and whistles. 7ish years since I've used it and I found an easter-egg in the standard theme that changes all the fonts to Comic Sans. Its almost like they want you to nuke the default theme and make something from scratch. Product search JS logic is tied to the mobile navigation? WTF

On Thu, Dec 13, 2018 at 7:59 PM John Elliott notifications@github.com wrote:

I applaud both bigcartel and shopify for even offering tools like Dugway and Slate. I'm grateful to have either. A number of smart people evidently put their best effort into building the tools. 👍

We stopped using bigcartel because 'deploying' by copy/paste into the web editor was to much of a pain: other logged-in users could clobber changes and we had no way to tell what was deployed other than logging out, logging in, downloading and diffing files 🙃

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/bigcartel/dugway/issues/158#issuecomment-447196979, or mute the thread https://github.com/notifications/unsubscribe-auth/ABLRxjmFP-FkGvgD41K-Bl4BKftncBSWks5u4xQcgaJpZM4Ulhf9 .