Frontend Hello World

The place to start your next frontend application in 2019

This is a Hello World application, using Babel 7, Prettier, Tailwind, Mithril JSX (optional), PurgeCSS, Laravel Mix, Chai and Mocha.

Starting the project

In the project's folder:

yarn  # install dependencies
yarn prod  # build for production
yarn server  # serve the prodution build

Open a browser at the given Local URL.

Prettier

Always use prettier before commiting your code.

It is recommanded to install an extension that formats on save, like VSCode's Prettier - Code formatter.

If you do install it, add the following line in your workspace settings:

{
  "editor.formatOnSave": true
}

Editorconfig

As for Prettier, it is recommended that you use an extension that respects the .editorconfig file.

In VSCode, you can install EditorConfig for VS Code.

Scripts

dev

Builds in development mode (no optimizations).

watch

Builds in development mode and automatically reloads when files have been altered.

prod

Builds in production mode.

server

Starts a simple webserver in the public directory, serving a single file (usefull for SPA).

prettify

Runs Prettier on all files inside the source directory.

test

Runs Mocha, the test framework, on all files in the test folder

JSX Support

Install the Babel plugin.

yarn add -D @babel/plugin-transform-react-jsx

Add the following in .babelrc:

{
  ...
  "plugins": [
    ...
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "m",
        "pragmaFrag": "m.fragment"
      }
    ]
  ]
}

If you enable JSX, you still need to import Mithril in all files that use JSX.

import m from 'mithril'