SwiftyLaunch for Web Overview

SwiftyLaunch for Web is an optional SwiftyLaunch Package that allows you to generate an easy-to-use and customize landing page for your app. Even if you have never built a website before. You can upgrade your license here (opens in a new tab).

After generating a project with SwiftyLaunch for Web enabled and completing the initial AnalyticsKit setup (if you have it enabled and don't opt in to automatic provider linking), you will get following features out of the box:

• A beautiful pre-made landing page template: Out of the box you get a a pre-made landing page that you can easily customize and deploy, already pre-filled with the information that you provide in the project setup.
• A website that is built on top of the state-of-the-art toolset: Next.js + Typescript, Tailwind, shadcn/ui and more. Read more.
• Pre-made components for Privacy Policy, Terms of Service, etc.: Just drop in a Markdown file and the website will generate a beautiful page for you. Read more.
• Connected with your iOS App: If you generate the landing page together with your iOS App, SwiftyLaunch will automatically couple them: use the correct domain name in both places, make sure to pre-fill a shared PostHog API keys and more.
• Out of the box Analytics: No setup required. SwiftyLaunch will handle that for you. Read more.
• Out of the box SEO: No setup required. SwiftyLaunch will handle that for you. Read more.
• Easy-to-deploy: The website is configured and ready to be deployed to Vercel a matter of minutes.

Module Deep Dive

Tech Stack

In this section, we will go through the tech stack that SwiftyLaunch for Web uses, and why we chose certain technologies.

React + Next.js

SwiftyLaunch for Web generates app built on top of React (opens in a new tab), a declarative framework for building front-end interfaces for websites. But nowadays, rarely anyone builds on top of raw React, but React is rather used via Next.js (opens in a new tab) or Vite (opens in a new tab). Our choice of tech stack is Next.js. It allows you to intuitively structure your full-stack website (both front and backend) using a single, scalable and maintainable codebase.

Tailwind CSS

Nowadays, it is considered "uncool" if you write your CSS manually. Inline CSS stinks and having to switch between different CSS files is a pain. Us, iOS developers are so used to SwiftUI and being able to write all the styling right next to the component, that we want to have the same experience on the web.

This is why we picked Tailwind CSS (opens in a new tab) for styling of the website. It allows you to write all the necessary styling right next the component. The interpreted styling is then automatically converted into appropriate CSS classes. It also is opinionated (in a good way) and helps you maintain a consistent design across your website.

shadcn/ui

Now, more often than not, you will have reusable components throughout your website. To make your life easier, especially with things like accessibility, we picked shadcn/ui (opens in a new tab) as our component library. It takes one line to add a ready-to-use component from their vast library to your code base, and you can easily customize the style to your liking.

Motion (formely Framer Motion)

Us, iOS devs are spoiled with SwiftUI's animation system. The Motion (opens in a new tab) library isn't quite as one-line to use as SwiftUI's animation system, and has a bit of a learning curve, but is the only thing that comes even close to what we can do in SwiftUI. (We have to accept anything beyond basic css animations can be quite janky and requires some time to get right.)

T3 Env + Zod

Zod (opens in a new tab) is a helpful library to validating any sort of data in typescript (for example, to ensure that some string is a valid string and between 5 and 20 characters).

We use it in combination with T3 Env (opens in a new tab) to validate our environment variables. Environment variables can be a pain to manage. This library makes sure that when you run your project (or deploy it), you get an error message if you have a missing or invalid environment variable. Plus you can then also typesafely access your environment variables in your codebase!

Posthog + Vercel Analytics

We use PostHog (opens in a new tab) for product analytics if you have AnalyticsKit enabled during project generation. But we also always include Vercel Analytics (opens in a new tab) out of the box for minimal analytics such as page views, referrers and more. Read more about it here.

Vercel (Recommended)

Even though it isn't directly a part of the tech stack, we strongly recommend using Vercel (opens in a new tab) for deploying your website. It is ridiculous how great the DX is and how easy it is to deploy your website to Vercel. Plus it will not cost you a dime for 99% of your websites. Read more about deploying to Vercel.

AnalyticsKit Integration

If AnalyticsKit is selected during project generation, SwiftyLaunch will automatically add all the necessary PostHog configuration to your project. Otherwise, it always includes Vercel Analytics out of the box for minimal analytics such as page views, referrers and more. Read more about the AnalyticsKit integration here.