Noitidart

1. Initialize sails web app by doing sails new sails-webpack and then Choose 1 for “Web App”.
2. Uninstall Grunt: a. Run npm un grunt sails-hook-grunt. b. Delete /tasks directory.
3. Install packages for our webpack hook: a. Install dev dependency by running npm i webpack -D. b. Install lodash as prod dependency (as I'm sure you'll use this in prod later) by running npm i lodash.
4. Create webpack hook: a. Run sails generate hook webpack, this creates file api/hooks/webpack/index.js. b. Overwrite it with this contents - https://gist.github.com/Noitidart/e1a674f9b6dfcd8219baab1e6bce7b04

Noitidart

import '../dependencies/bootstrap-4/bootstrap-4.css';
import '../dependencies/fontawesome.css';
import '../styles/importer.less';

import './cloud.setup';
import './components/ajax-button.component';
import './components/ajax-form.component';
import './components/js-timestamp.component';
import './components/modal.component';
import './utilities/open-stripe-checkout';

Noitidart

<script src="/dependencies/jquery.min.js"></script>
<script src="/dependencies/lodash.js"></script>
<script src="/dependencies/moment.js"></script>
<script src="/dependencies/bootstrap-4/bootstrap-4.bundle.js"></script>
<script src="/dependencies/cloud.js"></script>
<script src="/dependencies/vue.js"></script>
<script src="/dependencies/vue-router.js"></script>
<script src="/dependencies/sails.io.js"></script>
<script src="/dependencies/parasails.js"></script>
<script src="/js/index.bundle.js"></script>

Noitidart

<link rel="stylesheet" href="/js/index.bundle.css">

Noitidart

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

Noitidart

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports.webpack = {
  config: [
    {
      mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
      devtool: process.env.NODE_ENV === 'production' ? undefined : 'eval-source-map',
      entry: './assets/js/index.js',

Noitidart

const webpack = require('webpack');
const { once } = require('lodash');

/**
 * webpack hook
 *
 * If production, build once, then trigger `done`.
 * If dev, build once, trigger `done`, then watch for changes to trigger rebuild.
 *
 * @description :: A hook definition.  Extends Sails by adding shadow routes, implicit actions, and/or initialization logic.

Noitidart

const DEFAULT_PER_PAGE = 25;
const DEFAULT_PAGE = 1;

class Paginator {

    static describeParams(defaultPerPage = DEFAULT_PER_PAGE) {

        return {
            page: {
                type: 'number',

Noitidart

const color = {
    // using "light" ios column. not the "dark" column
    // using "500" material
    // keys are what is seen on ios - https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color
    // and also the same exact key is seen on material - https://material.io/design/color/#tools-for-picking-colors
    // - the "2014 Material Design color palettes" section
    gray: isIOS ? '#8e8e93' : '#9E9E9E',
    gray2: isIOS ? '#aeaeb2' : '#BDBDBD',
    gray3: isIOS ? '#c7c7cc' : '#E0E0E0',

Noitidart

<form>
  <div class="form-row">
    <div class="form-group col-6">
      <label for="inputEmail3" class="h6">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6 d-flex align-items-end">
  <button type="submit" class="btn btn-primary px-4">Search</button>
    </div>
  </div>