> This post was originally posted in [Dev.to](https://dev.to/davidamunga/free-space-in-your-mac-for-mobile-development-5a60)

Once every few months i perform the much needed relieving task of freeing disk space out of my 256GB Mac. I often use [CleanMyMac](https://macpaw.com/cleanmymac) is an ideal software for periodically cleaning out your disk space with some added performance and security optimizations. However when you wan't to clean out your dev environment it takes a few manual commands to get the job done since disk cleaner software won't know what to clear. You'd be surprised how much space you recover after clearing out unused dev resources. This article describes how to free storage space for Mobile Developement in a Mac laptop.

## Android

### 1. **Clean up Gradle**

Your Gradle Home directory contains wrapper ,caches and daemons files. The more projects with diffferent gradle versions the more subdirectories within those three folders. You can delete all three directories. This saved me a cool **\~12GB** of space.

You could run the command as below to achieve the desired result.

``` bash
cd ~/.gradle
rm -rf caches daemon wrapper
```

### 2\. Android SDK Cleaning

Android System images are only used by emulators. If you use a real Android device during development for debugging, you no longer need them, so you can remove them all. This could easily save you **5GB** doing this.
![Android SDK Manager UI](https://davidamungacom.s3.eu-west-1.amazonaws.com/Android_SDK_Manager_2e0292412d.png)
*Android Studio SDK Manager*

# iOS

Its easy to run out of space while doing iOS Development since Xcode loves to cache things everywhere around your Mac. It gets even complicated once Xcode has an update(\~11GB) but realistically its around \~40GB free space required to download and install the update. Sadly i've had to delete Xcode and install it again to make it work again.
![XCode Update Screen](https://davidamungacom.s3.eu-west-1.amazonaws.com/X_Code_Update_Screen_3a2e2a1d91.jpeg)
_X Code Update Screen_

### 1\. Remove Old Simulators

As with Android the major culprit will be old simulators that take alot of space. The simulator files are by default located in `~/Library/Developer/Xcode/iOS/Device Support` folder. You can delete old simulators using the following command.

``` bash
xcrun simctl delete unavailable
```

### 2\. Remove Cocoapod Caches

If you use Cocoapods in your projects you can clear them using this command. Don't worry you can rebuild them later again.

``` bash
rm -rf "${HOME}/Library/Caches/CocoaPods"
```

### 3\. Clean up Archives\,Logs and DerivedData folders

Folders like DerivedData can take up a significant amount of space too. DerivedData is generated during each build process. This contains intermediate build results,indexes that speed up time on each build. You can use the command below to clear all that data.

``` bash
rm -rf ~/Library/Developer/Xcode/Archives
rm -rf ~/Library/Developer/Xcode/DerivedData
rm -rf ~~/Library/Developer/Xcode/iOS Device Logs/
```

## DevCleaner for Mac

If you're not to keen in heading to this article again to clean up your iOS Development workspace, you can download this [DevCleaner](https://apps.apple.com/us/app/devcleaner/id1388020431?mt=12) by One Minute Games that handles it superbly.
![Dev Cleaner App](https://davidamungacom.s3.eu-west-1.amazonaws.com/Dev_Cleaner_c7fd291e33.png)
*Dev Cleaner App*
# Conclusion

- - -

Don't forget to empty your trash to check out how much space you have available. I was able to clear around **\~15GB** after doing this. I hope this also works for you. You can recommend other tools or ways you've found that has freed space for mobile development. It would be cool to add it to the article.

large_kari-shea-1SAnrIxw5OY-unsplash.jpg

medium_kari-shea-1SAnrIxw5OY-unsplash.jpg

small_kari-shea-1SAnrIxw5OY-unsplash.jpg

thumbnail_kari-shea-1SAnrIxw5OY-unsplash.jpg

kari-shea-1SAnrIxw5OY-unsplash.jpg

Free space in your Mac for Mobile Development

## Background

I first launched my website in 2018 and used this [free Bootstrap CV theme](https://startbootstrap.com/theme/resume) to quickly setup my profile before i applied for jobs after completing university.  I was content after publishing my first iteration but over time grew tired of the design and longed for adding other cool features like a blog , newsletter and a custom backend CMS. Once i got a full time job I found the task too difficult and time consuming to do. I didn't want to get a Wordpress theme and get it up and running quickly. I wanted to build it from scratch while using a Modern tech stack to learn improve my frontend development knowledge. It was time for change and i started building it  on January 2021.

## Inspiration

I got the inspiration for my site after looking at Brian Lovin's 2020 personal [site](http://brianlovin.com) that is currently open source. You can check it out [here](https://github.com/brianlovin/brian-lovin-next).  Here is a snapshot of how it looks.

[https://twitter.com/brian_lovin/status/1333155693008863232](https://twitter.com/brian_lovin/status/1333155693008863232)

## New Stack

My new site is currently built using [Next.JS](http://vercel.com) and [TailwindCSS](http://tailwindcss.com) for the Frontend. I loved the developer experience of styling web interfaces using Tailwind and the Next.JS being the best React framework to build a Server side rendered apps together with **[Vercel](http://vercel.com)** that provides a neat platform to host your apps and makes CI/CD,Deployment easier for developers . I definitely recommend checking out these frameworks if your are interested in React and CSS. 

The Backend is built using [Strapi](http://strapi.io), a really good Headless CMS. There are many Headless CMS that are currently available and I spent quite a lot of time/energy testing them all. However I ended up choosing Strapi since it had a neat interface , was open-source so i could host it on my server and the backend was built in React so adding custom plugins to the interface was easy and Strapi provided good documentation on how to integrate them.

## Using Next.JS

I currently love Next.JS as my go to Javascript framework for building fast React web applications. Thanks to it having [Automatic Static Optimization](https://nextjs.org/docs/advanced-features/automatic-static-optimization) you can build both statically generated and server rendered pages. I built the site with a decent local environment setup using Prettier,ESLint for linting while writing with Typescript helped in type checking.

## **Hosting on Vercel**

[Vercel](http://vercel.com) is a cloud platform that allows developers to host websites and web services that deploy instantly, and require no supervision and configuration. Some of the main pros include fast refresh, flexible data caching and easy integration with your repos at Github, Gitlab and Bitbucket. It was cool that that Vercel was the company that built the Next.JS framework so they were a first choice for the same. Luckily it has a flexible free plan for hosting static websites and single page applications. I was able to deploy my website to Vercel and setup my domain to the site.

## Using TailwindCSS

I've been a huge fan of [Tailwind](https://tailwindcss.com) ever since it came out in 2019. By default , it makes the developer think in components as you can easily separate a site's elements that reduces cognitive load during styling and is faster than writing CSS or CSS-in-JS. I especially like the inclusion of styling a Dark Theme of which you can enable by default or use the system default setting. Using [next-themes](https://www.npmjs.com/package/next-themes) provided an easier abstraction to achieve Dark Mode without flashing while changing themes.

 

![https://davidamungacom.s3-eu-west-1.amazonaws.com/darkmode.gif](https://davidamungacom.s3-eu-west-1.amazonaws.com/darkmode.gif)

## SEO

Every blog post is automatically populated with meta tags using [next-seo](https://github.com/garmeeh/next-seo) . This includes title, description ,meta tags ,twitter metadata. 

## RSS Feed Generation

An RSS feed is auto-generated from your blog post feed. I use RSS to keep up with a few tech blogs, web comics and use [1Feed](http://1feed.app) to sync all the apps i have. So i thought it was a good idea to build one for my site. This is generated through manually after fetching all the posts like below.

```jsx
// Generate One Item
const generateRssItem = (post: Post): string => `
  <item>
    <guid>https://davidamunga.com/blog/${post.slug}</guid>
    <title>${post.title}</title>
    <link>https://davidamunga.com/blog/${post.slug}</link>
    <description>${post.excerpt}</description>
    <pubDate>${new Date(post.published_at).toUTCString()}</pubDate>
  </item>
`
//Generate Entire Feed
export const generateRss = (posts: Post[]): string => `
  <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
      <title>Blog - David Amunga</title>
      <link>https://davidamunga.com/blog</link>
      <description>Thoughts about Development,Design and Products</description>
      <language>en</language>
      <lastBuildDate>${new Date(posts[0].updated_at).toUTCString()}</lastBuildDate>
      <atom:link href="https://davidamunga.com/rss.xml" rel="self" type="application/rss+xml"/>
      ${posts.map(generateRssItem).join('')}
    </channel>
  </rss>`
```

The rss feed is generated at build time using the getStaticProps function and is saved using the `fs` module to a root rss.xml file in the public folder. Its also fetched again after 6 hours.

```jsx
// Generate RSS
export const getStaticProps: GetStaticProps = async () => {
  const postResponse = await axios.get(`${process.env.NEXT_PUBLIC_BASE_URL}blogs`)
  const posts = postResponse.data
  const rss = generateRss(posts)

  fs.writeFileSync('./public/rss.xml', rss)

  return { props: { posts }, revalidate: 6 * 60 * 60 }
}
```

## Future Plans

As i'm happy how the new design turned out. I hope to make some future additions. I intend to make a richer content view for the blog posts incorporating more embeds from different Media.  It would also be great to have some neat micro-interactions/transition animations while sticking to its plain theme. Furthermore, i wish to have it working with Apollo GraphQL with Caching to boost performance on the site.