Sails JS - how to start server in a different port

 in production environment, this can be done by setting the 'port' value in production.js to the desired port that is wanted

in dev environment, this configuration can be done in the local.js and as usual start the server using sails lift. 

The background of MUI v5 (part1)

Improved customizability

Migration from JSS to emotion

The first step we took to improve the customization experience was to rethink the styling solution from a blank page.

If you have been following MUI for a long time, you have probably noticed that we have iterated (a lot!) on the styling solution over the last seven years. 

Originally it was Less, then inline-styles, then JSS, and now emotion. Why change it again? We wanted to solve the following problems:

This was to solve following problems 

The React community is settling on styled() as the most popular CSS-in-JS API. We have used popularity as a proxy for "best".

const StyledDiv = styled('div')({

  color: 'red',

});

// or

const StyledDiv = styled.div`

  color: red;

`;

We have made styled() the lowest level primitive to add styles. This API is already known by many.

We have defined a common interface with concrete implementations:

@mui/styled-engine: implemented with emotion (default).

@mui/styled-engine-sc: implemented with styled-components

If you are using a different styling library, feel free to contribute a wrapper. For instance, there is one attempt with goober, a library obsessing on bundle size (3kB gzipped).

This allows developers to swap between different style engines. For example, styled-components users no longer need to bundle emotion and styled-component, nor do they need to configure the server-side rendering for each. How does the swap work? The same way it does from React to Preact.

The first immediate benefit of the move to emotion was performance. The <Box> component is x5-x10 more performant in v5, compared to v4.

Going forward, developers can either keep using JSS with the legacy @mui/styles package or migrate from JSS. We recommend the latter to match the core components.

references:

https://mui.com/blog/mui-core-v5/#high-level-goals-for-v5

What is MUI v5 emotion

 Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.

There are two primary methods of using Emotion. The first is framework agnostic and the second is for use with React.

Framework Agnostic

npm i @emotion/css

The @emotion/css package is framework agnostic and the simplest way to use Emotion.

Requires no additional setup, babel plugin, or other config changes.

Has support for auto vendor-prefixing, nested selectors, and media queries.

You simply prefer to use the css function to generate class names and cx to compose them.

Server side rendering requires additional work to set up

import { css, cx } from '@emotion/css'

const color = 'white'

render(

  <div

    className={css`

      padding: 32px;

      background-color: hotpink;

      font-size: 24px;

      border-radius: 4px;

      &:hover {

        color: ${color};

      }

    `}

  >

    Hover to change color.

  </div>

)

React

The “@emotion/react” package requires React and is recommended for users of that framework if possible.

Best when using React with a build environment that can be configured.

css prop support

Similar to the style prop, but also has support for auto vendor-prefixing, nested selectors, and media queries.

Allows developers to skip the styled API abstraction and style components and elements directly.

The css prop also accepts a function that is called with your theme as an argument allowing developers easy access to common and customizable values.

Reduces boilerplate when composing components and styled with emotion.

Server side rendering with zero configuration.

Theming works out of the box.

ESLint plugins available to ensure proper patterns and configuration are set.

// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement

/** @jsx jsx */

import { css, jsx } from '@emotion/react'

const color = 'white'

render(

  <div

    css={css`

      padding: 32px;

      background-color: hotpink;

      font-size: 24px;

      border-radius: 4px;

      &:hover {

        color: ${color};

      }

    `}

  >

    Hover to change color.

  </div>

)

npm i @emotion/styled @emotion/react

The @emotion/styled package is for those who prefer to use the styled.div style API for creating components.

import styled from '@emotion/styled'

const Button = styled.button`

  padding: 32px;

  background-color: hotpink;

  font-size: 24px;

  border-radius: 4px;

  color: black;

  font-weight: bold;

  &:hover {

    color: white;

  }

`

render(<Button>This my button component.</Button>)

References:

https://stackoverflow.com/questions/69631840/mui-v5-mui-material-styles-vs-emotion-react

https://emotion.sh/docs/introduction

How to create msi on Mac

The easiest option is to use the msi-packager utility 

The installer has no wizard. Users just run the installer and your app will be installed and shortcuts created.

You must have wixl from msitools available in your path.

brew install msitools

npm install msi-packager

var createMsi = require('./')

 

var options = {

 

  // required

  source: '/Users/matt/Code/loop/loopjs-packager/build/Loop Drop-win32',

  output: '/Users/matt/Code/loop/loopjs-packager/releases/Loop Drop v1.0.0.msi',

  name: 'Loop Drop',

  upgradeCode: 'YOUR-GUID-HERE',

  version: '1.0.0',

  manufacturer: 'loopjs.com',

  iconPath: '/Users/matt/Code/loop/loopjs-packager/icon.ico',

  executable: 'Loop Drop.exe',

 

  // optional

  description: "Some description",

  arch: 'x86',

  localInstall: true

 

}

 

createMsi(options, function (err) {

  if (err) throw err

  console.log('Outputed to ' + options.output)

})

There was a file system callback issue, but then it cleared after making some changes inside npm 

References:

https://www.npmjs.com/package/msi-packager