Part II ➝ The software we recommend for development (MacOS)

[jimmylee]

What will I know after finishing this?

You will learn the following things

• A new IDE setup you might enjoy.
• How to get all the dependencies you need a very tidy way.
• Enough to start development with nextjs-sass-starter and running this boilerplate immediately.

If you have any questions, don't hesitate to ask!

My new MacOS device is probably missing dependencies, what do I need to run this code locally?

I run through the following steps on all of my new MacOS installations.

• Run xcode-select --install
  • Afterwards verify with xcode-select -p
  • You'll see something like /Applications/Xcode.app/Contents/Developer
• Install Homebrew
  • Follow the instructions on the website.
  • NEW: You might need to add export PATH=/opt/homebrew/bin:$PATH to your .zshrc or .bashrc if you encounter a warning. This happened to me on a new install on Apple M3 Max.
  • Install node: brew install node

This gets you everything you need. Nothing else is required. Ask us if you get stuck!

What tools should I use to do development with you?

This repository is designed to be the base code we use for all of our projects. It is just a minimal NextJS project that is flexible enough to be adapted to any context, but also has some pre-written code to make writing web applications feel faster.

Here is what you should download to develop like our team:

• Sublime Text 4
  • I use it with JsPrettier
  • I use it with this special theme that makes many changes to the style of the interface rsms/sublime-theme
  • The font I use is JetBrains Mono

Let us know if you run into any issues during installation.

There is already a .prettierrc in the root directory so you don't have to configure it yourself. But if you need to, make sure this option is enabled:

// ----------------------------------------------------------------------
// Auto Format on Save
// ----------------------------------------------------------------------
//
// @param {bool} "auto_format_on_save"
// @default false
//
// Whether or not to automatically format the file on save.
// ----------------------------------------------------------------------

"auto_format_on_save": true,

Is that it?

Yep, its easy to get a professional setup as a web developer in 2023. Your screen should look something like this with your terminal, your code editor, and probably a browser window elsewhere.