DEV Community

Kalpak Palekar
Kalpak Palekar

Posted on

Setup MacMini M1 for Development

#macmini #setup #development #m1

1. Update Siri & Spotlight Settings

Update Siri and Spotlight settings to only display search results for Applications and System Settings:

Go to System Settings > Siri & Spotlight

and under Search results section uncheck all options except Applications and System Settings.

2. Install Google Chrome for M1

To install Google Chrome on your new Mac Mini M1 use this link https://chromeenterprise.google/browser/download/#mac-tab and choose options as below:

  • Channel: Stable
  • File type: DMG Universal Installer (x86 and ARM)

3. Install Applications from AppStore

Install below list of Applications from AppStore:

  • Lockera Widgets
  • iScreen Shoter: Screenshot App
  • WhatsApp Desktop
  • Telegram
  • Xcode
  • Moped Text Editor
  • Keynote
  • Pages
  • Numbers

4. Install Homebrew Package Manager for Missing Package Manager for macOS

To install homebrew on your macOS, first you have to install Xcode-select. To install homebrew and Xcode-select open terminal and run below commands:

xcode-select --install
Enter fullscreen mode Exit fullscreen mode

Once you run the above command, you will see a pop-up saying

The "xcode-select" command requires the command line developer tools. Would you like to install the tools now?

just click on install and when it shows Terms and Conditions page just click on Agree to continue and it will install required tools. After installing xcode-select run below command to install homebrew:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Enter fullscreen mode Exit fullscreen mode

Once the homebrew installation is completed run these two commands in your terminal to add homebrew to your PATH:

(echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> /Users/<your_username>/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"
Enter fullscreen mode Exit fullscreen mode

To check the brew is installed and working properly run below command:

brew doctor
Enter fullscreen mode Exit fullscreen mode

To update brew run below command:

brew update
Enter fullscreen mode Exit fullscreen mode

5. Install Git to code respository

To install git repository run below command:

brew install git
Enter fullscreen mode Exit fullscreen mode

6. Install iterm2, zsh and configure iterm2 with oh-my-zsh

First install iterm2 and start using iterm2 instead of default zsh terminal which comes with macOS

brew install iterm2
Enter fullscreen mode Exit fullscreen mode

Once you installed iterm2 open it and click on iterm2 menu from status bar and then click on Install Shell Integration. Keep the checkbox checked of "Also install iterm2 Utilities" and click continue. Then click on "Download and Run Installer" and click continue. Once the installation completes you will see the ok button click on that.

Now to install zsh run the below command:

brew install zsh
Enter fullscreen mode Exit fullscreen mode

Once the zsh installation gets completed, change the default shell in below file
sudo nano /etc/shells

add below line at the end of the file then save and close the file.

/opt/homebrew/bin/zsh
Enter fullscreen mode Exit fullscreen mode

To change the default shell to zsh run below commands:

chsh -s /opt/homebrew/bin/zsh
exec $SHELL
Enter fullscreen mode Exit fullscreen mode

Once you run the above commands quit your iterm2 and reopen it again and run below command to check the default shell is changed to your zsh:

echo $SHELL
Enter fullscreen mode Exit fullscreen mode

To install "oh-my-zsh" run below command:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
Enter fullscreen mode Exit fullscreen mode

7. Install & configure Powerlevel10k and lovelace iterm color theme

Once you install "oh-my-zsh" install Powerlevel10k by running below command:

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ~/powerlevel10k
echo 'source ~/powerlevel10k/powerlevel10k.zsh-theme' >>~/.zshrc
Enter fullscreen mode Exit fullscreen mode

Once you install Powerlevel10k download lovelace.itermcolors theme for your iterm2 from https://iterm2colorschemes.com/ and change the iterm color theme and then update preferences:
Go to iterm2 > Settings > Profiles and select Colors tab to change the iterm color theme. Click on Color Presets dropdown and click import and select the lovelace.itermcolors file and then change the theme to lovelace.

After that select Session tab and check the "Status bar enabled" checkbox and click on Configure Status Bar and select Light Colors from Auto-Rainbow dropdown. Add the below status bar components:

  • Network Throughput
  • CPU Utilization
  • Memory Utilization
  • Clock
  • Fixed-size Spacer
  • git state

After that go to Appearance Menu and under General tab change the Status bar location to Bottom from dropdown. Then quit iterm2 and reopen it to auto configure the look of your Powerlevel10k. Selection the options as below:

  1. Install Meslo Nerd Font? - Yes
  2. Prompt Style - Classic
  3. Character Set - Unicode
  4. Prompt Color - Light
  5. Show current time - 12-hour format
  6. Prompt Separators - Angled
  7. Prompt Heads - Sharp
  8. Prompt Tails - Flat
  9. Prompt Height - One line
  10. Prompt Spacing - Compact
  11. Icons - Few icons
  12. Prompt Flow - Concise
  13. Enable Transient Prompt - No
  14. Instant Prompt Mode - Verbose
  15. Apply changes to ~/.zshrc? - Yes

Once done quite your iterm2 and reopen to see the changes.

Add ~/.bashrc into ~/.zshrc so it will be initialised on open and put all your export and alias config in ~/.bashrc. Add below line to end of the ~/.zshrc
source ~/.bashrc

8. Install and configure NVM for NodeJS version manager

nvm (Node Version Manager) is a tool that allows you to install and manage multiple versions of Node.js on your Mac. To install nvm on a Mac, you will need to follow these steps:

Install nvm
Use homebrew to install nvm on your macOS

brew install nvm
Enter fullscreen mode Exit fullscreen mode

Add nvm to your shell profile: To make nvm available every time you open a new terminal window, you will need to add the following line to your shell profile (e.g., ~/.bashrc):

export NVM_DIR="$HOME/.nvm"
[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh" # This loads nvm
[ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" # This loads nvm bash_completion
Enter fullscreen mode Exit fullscreen mode

Install Node.js

Now you can use to install latest version of node with following command:

nvm install node
Enter fullscreen mode Exit fullscreen mode

Install specific version
To install specific version of node you can use syntax nvm install <version> as below command:

nvm install 18
Enter fullscreen mode Exit fullscreen mode

List of available version
You can use below command to check the list of available node versions which you can install:

nvm ls-remote
Enter fullscreen mode Exit fullscreen mode

Switch between installed version
You can switch between installed node versions with nvm use <version> see below command:

nvm use 18
Enter fullscreen mode Exit fullscreen mode

Set default version
You can set the specific installed version as default version with nvm alias default <version>:

nvm alias default 18
Enter fullscreen mode Exit fullscreen mode

9. Add alias for python3 as python

MacOS Sonoma comes with Python 3.9.x installed by default. So if you want to use python from terminal everytime you have to use python3 command and pip3 for pip package manager. You can create aliases to use python and pip instead of using with version name as below:

alias python=python3
alias pip=pip3
Enter fullscreen mode Exit fullscreen mode

10. Install Visual Studio Code Editor

You can download and install visual studio code editor from here: https://code.visualstudio.com/docs/?dv=darwinarm64

11. Install VS Code Extension

Once you install visual studio code editor you can install some popular and useful extensions which will be very helpful in development:

  1. Material Icon Theme - Philipp Kief
  2. Prettier Code formatter - Prettier
  3. Tailwind CSS IntelliSense - Tailwind Labs
  4. JavaScript (ES6) code snippets - charalampos karypidis
  5. ES7 React/Redux/GraphQL/React-Native snippets - rodrigovallades
  6. ESLint - Microsoft
  7. Angular Essentials (Version 16) - John Papa
  8. Angular Language Service - Angular
  9. TypeScript Vue Plugin (Volar) - Vue
  10. Vue Language Feature (Volar) - Vue
  11. Dev Containers - Microsoft
  12. Docker - Microsoft
  13. Intellicode - Microsoft
  14. Peacock - John Papa
  15. PHP Intelephense - Ben Mewburn
  16. Pylance - Microsoft
  17. Python - Microsoft
  18. YAML - Red Hat

12. Install OpenSSL, Apache2, PHP, MySQL and PHPMyAdmin

First we will install openssl with following command:

brew install openssl
Enter fullscreen mode Exit fullscreen mode

Once you install openssl you have to path to ~/.bashrc

export PATH="/opt/homebrew/opt/openssl@3/bin:$PATH"
export LDFLAGS="-L/opt/homebrew/opt/openssl@3/lib"
Enter fullscreen mode Exit fullscreen mode

Install Apache2
Before installing Apache through brew first Shutdown and remove auto-loading of built-in Apache

sudo apachectl stop
sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist 2>/dev/null
Enter fullscreen mode Exit fullscreen mode

Now install Apache with brew as below:

brew install httpd
Enter fullscreen mode Exit fullscreen mode

Now we just need to configure things so that our new Apache server is auto-started

brew services start httpd
Enter fullscreen mode Exit fullscreen mode

Then check your apache installed correctly by visiting http://localhost:8080 in browser

Apache is controlled via the brew services with following commands:

brew services stop httpd
brew services start httpd
brew services restart httpd
Enter fullscreen mode Exit fullscreen mode

Apache Configuration
In the latest version of brew, you have to manually set the listen port from the default of 8080 to 80, so we will need to edit Apache's configuration file /opt/homebrew/etc/httpd/httpd.conf. Open this file and edit as below

sudo nano /opt/homebrew/etc/httpd/httpd.conf
Enter fullscreen mode Exit fullscreen mode

Find the line that says

Listen 8080
Enter fullscreen mode Exit fullscreen mode

And change it to 80:

Listen 80
Enter fullscreen mode Exit fullscreen mode

Search for the term DocumentRoot, and you should see the following line:

DocumentRoot “/opt/homebrew/var/www”
Enter fullscreen mode Exit fullscreen mode

Change this to point to your user directory where your_user is the name of your user account:

DocumentRoot “/Users/your_user/Sites”
Enter fullscreen mode Exit fullscreen mode

You also need to change the tag reference right below the DocumentRoot line. This should also be changed to point to your new document root also:

<Directory “/Users/your_user/Sites”>
Enter fullscreen mode Exit fullscreen mode

In that same block you will find an AllowOverride setting, this should be changed as follows:

#
# AllowOverride controls what directives may be placed in .htaccess files.
# It can be "All", "None", or any combination of the keywords:
#   AllowOverride FileInfo AuthConfig Limit
#
AllowOverride All
Enter fullscreen mode Exit fullscreen mode

Also we should now enable mod_rewrite which is commented out by default. Search for mod_rewrite.so and uncomment the line by removing the leading # by pushing ⌘ + / on the line (this is a quick way to uncomment and comment a single or multiple lines:

LoadModule rewrite_module lib/httpd/modules/mod_rewrite.so
Enter fullscreen mode Exit fullscreen mode

User & Group
Now we have the Apache configuration pointing to a Sites folder in our home directory. One problem still exists, however. By default, apache runs as the user _www and group _www. This will cause permission problems when trying to access files in our home directory. About a third of the way down the httpd.conf file there are two settings to set the User and Group Apache will run under. Change these to match your user account (replace your_user with your real username), with a group of staff:

User your_user
Group staff
Enter fullscreen mode Exit fullscreen mode

Servername
Apache likes to have a server name in the configuration, but this is disabled by default, so search for:

#ServerName www.example.com:8080
Enter fullscreen mode Exit fullscreen mode

and replace it with:

ServerName localhost
Enter fullscreen mode Exit fullscreen mode

Sites Folder
Now, you need to create a Sites folder in the root of your home directory. You can do this in your terminal, or in Finder. In this new Sites folder create a simple index.html and put some dummy content in it like: <h1>My User Web Root</h1>.

mkdir ~/Sites
echo "<h1>My User Web Root</h1>" > ~/Sites/index.html
Enter fullscreen mode Exit fullscreen mode

Restart apache to ensure your configuration changes have taken effect:

brew services stop httpd
brew services start httpd
Enter fullscreen mode Exit fullscreen mode

Download & Install MySQL 8
You can download and install MySQL 8 Community Server from this url: https://dev.mysql.com/downloads/mysql/. Select your OS type and download the DMG Archive installer.

Install Postgres Database
You can install PostgresSQL on your mac M1 with homebrew:

brew install postgresql
Enter fullscreen mode Exit fullscreen mode

Run below command to turn on your Postgres server automatically

brew services start postgresql
Enter fullscreen mode Exit fullscreen mode

Check your Postgres installation
Run following command in your terminal:

psql -d postgres
Enter fullscreen mode Exit fullscreen mode

psql is a command-line utility that was installed together with the Postgres server, -d specifies which database to connect to. Postgres is a default database that was installed by default.
You should see something like the following:

$ psql -d Postgres
psql (13.2)
Type "help" for help.
postgres=#
Enter fullscreen mode Exit fullscreen mode

Type \q to exit the database console.
To see other databases, type \l
To switch to a different database, use \c

Download and Install PGAdmin
You can download and install PGAdmin to access local and remote postgres databases from here: https://www.pgadmin.org/download/pgadmin-4-macos/.

Install MongoDB Compass to access local and remote mongoDB databases
You can download and install MongoDB Compass from this site: https://www.mongodb.com/try/download/compass.

Install PHP

brew install php
Enter fullscreen mode Exit fullscreen mode

or to install specific version

brew install php@7.4
Enter fullscreen mode Exit fullscreen mode

To switch between install php version

brew unlink php@8.2
brew link php@7.4
Enter fullscreen mode Exit fullscreen mode

To enable PHP in Apache add the following to httpd.conf and restart Apache:

LoadModule php_module /opt/homebrew/opt/php/lib/httpd/modules/libphp.so

<FilesMatch \.php$>
        SetHandler application/x-httpd-php
</FilesMatch>
Enter fullscreen mode Exit fullscreen mode

Finally, check DirectoryIndex includes index.php

DirectoryIndex index.php index.html
Enter fullscreen mode Exit fullscreen mode

The php.ini and php-fpm.ini file can be found in:
/opt/homebrew/etc/php/8.2/

To restart php after an upgrade:

brew services restart php
Enter fullscreen mode Exit fullscreen mode

Restart Apache

brew services restart httpd
Enter fullscreen mode Exit fullscreen mode

Create php info file and check in browser

echo “<?php phpindo(); ?>” > ~/Sites/info.php
Enter fullscreen mode Exit fullscreen mode

Install phpMyAdmin

brew install phpmyadmin
Enter fullscreen mode Exit fullscreen mode

To enable phpMyAdmin in Apache, add the following to httpd.conf and
restart Apache:

    Alias /phpmyadmin /opt/homebrew/share/phpmyadmin
    <Directory /opt/homebrew/share/phpmyadmin/>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        <IfModule mod_authz_core.c>
            Require all granted
        </IfModule>
        <IfModule !mod_authz_core.c>
            Order allow,deny
            Allow from all
        </IfModule>
    </Directory>
Enter fullscreen mode Exit fullscreen mode

Then open http://localhost/phpmyadmin
The configuration file is /opt/homebrew/etc/phpmyadmin.config.inc.php

Update Config
vi /opt/homebrew/etc/phpmyadmin.config.inc.php

# Extend cookies lifetime
$cfg['LoginCookieValidity'] = 7*24*60*60;
Enter fullscreen mode Exit fullscreen mode

Create phpMyAdmin.conf
vi /opt/homebrew/etc/httpd/extra/phpmyadmin.conf

# Insert following
Alias /phpmyadmin /opt/homebrew/share/phpmyadmin
<Directory /opt/homebrew/share/phpmyadmin/>
    Options Indexes FollowSymLinks MultiViews
    AllowOverride All
    <IfModule mod_authz_core.c>
        Require all granted
    </IfModule>
    <IfModule !mod_authz_core.c>
        Order allow,deny
        Allow from all
    </IfModule>
</Directory>
Enter fullscreen mode Exit fullscreen mode

Load phpMyAdmin.conf in Apache
vi /opt/homebrew/etc/httpd/httpd.conf

Append at the end of the conf

Load phpMyAdmin configuration 

Include /opt/homebrew/etc/httpd/extra/phpmyadmin.conf
Enter fullscreen mode Exit fullscreen mode

Restart httpd:

Brew services restart httpd
Enter fullscreen mode Exit fullscreen mode

Url: http://localhost/phpmyadmin

13. Install Composer

Install composer and add path into ~/.bashrc

brew install composer
export PATH=~/.composer/vendor/bin:$PATH
Enter fullscreen mode Exit fullscreen mode

14. Install Postman

You can install Postman with homebrew cask with following command:

brew install --cask postman
Enter fullscreen mode Exit fullscreen mode

15. Download and Install Docker Desktop

You can download and install Docker Desktop from Docker official website: https://www.docker.com/products/docker-desktop/.

Top comments (0)

Read next

sumedha00 profile image

@angular @fetchdata

Sumedha -

ceceliacreates profile image

Running a Phaser Game on Mobile Devices

Cecelia Martinez -

richamishra profile image

How can the workplace productivity be enhanced?

Richa Mishra -

aadarsh-nagrath profile image

Simplifying Form Validation with Zod and React Hook Form

Aadarsh Nagrath -