💚 starter 💚

Frontend starter and a static site generator for rapid prototyping.

⏩ tl;dr

download this repo
cd my-app/
npm i
npm run dev

When you see this you can open your browser at localhost:3000.

💪 Tasks

• npm i - Install dependencies
• npm run dev - Local development
• npm run build - Building static files
• npm start - Heroku run this after deploy

❓ Why we made this?

We are a group of creative frontenders and designers who likes to experiment and do new things our own way. At the same time sharing ways of doing things is valuable. Making a starter kit generates lots of valuable discussions, and can possibly help us move towards a slightly more streamlined way of doing things. Because consistency is also good.

When we started the this project we looked at a lot of different setups within the group. And we did find a lot of smart things and tried to merge it to a common platform. This means it is probably not perfect, but hopefully it will address a few pain points and make the setup process a bit easier. Modern frontend is complex, but there is no need to invent the wheel every time. 😄

Static site generators are awesome for rapid prototyping. That's why we included Metalsmith in our default setup. This allows for the content to be separated from templates and layouts without the need for a CMS 🤘. There is a whole bunch of static site generators out there, and we have tested a lot of them. We chose Metalsmith because it's both "pluggable" and quite flexible.

📦 starter contains

• Metalsmith static site generator
• Giving CSS superpowers with Sass
• Some basic CSS styles and setup
• Webpack for transpiling Sass and JavaScript
• Webpack Dev Server for 🔥 loading
• Babel for transpiling ES6
• File structure with a src/dist setup
• Pre-configured to be deployed on Heroku

Prerequisites: Node

At Netlife Research we install Node via NVM because we're not insane. NVM makes it easy to switch between different versions of Node. Copy paste this line into your command line (e.g. Terminal.app)

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.0/install.sh | bash

Restart your command line and comfirm that node runs via nvm by typing which node into the command line. If it returns /Users/[you]/.nvm/versions/node/something you're good to go. If it's not, ask for help in our #frontend Slack channel.

🍴 Linting

Both ESLint and SassLint is included in this starter. Our setup for ESLint is a fork of AirBnB's code standard, adopted by a lot of frontend projects. Linting may feel a bit irritating at first, but we'll strongly recommend everyone to use it. It's good for experienced developers as well as rising stars. It gives you good and helpful advice and at the same time we ensure the code quality.

Atom Packages for proper linting

• Linter
• SassLint
• ESLint

💻 Heroku

This starter contains both a server and build tasks for Heroku. Remember to change the password in server.js. Default password is: netlife / research.

For easy initial deploy to Heroku, use this button:

Choose a name for the new dyno and region Europe (if you indeed are in Europe). After the app is deployed go to Manage app and the Deploy tab to connect your Github repository. Deploy new versions manually or enable automatic deploys.

😄 Commit Message Emojis

To make things a bit more fun feel free to include a emoji in your commits. It could actually by quite informative too because it makes commit messages easier to browse. (Inspired by Commit Message Emoji)

Commit Type	Emoji
Initial Commit	🎉 :tada:
Cosmetics	🎨 :art:
New Feature	✨ :sparkles:
Bugfix	🐛 :bug:
Deleting stuff	❌ :x:
Refactoring	📦 :package:
Cleaning	🚿 :shower:
Experimental	🔮 :crystal_ball:
Documentation	📚 :books:
Performance	🐎 :racehorse:
Tooling	🔧 :wrench:
Tests	🚨 :rotating_light:
Deprecation	💩 :poop:

Emoji Cheat Sheet