Get Started

👋 Welcome to LaunchDocs — a step-by-step guide, for building easy-to-maintain, highly performant web applications.

This resource is the culmination of 12 years of experience in application development and is packed with learnings on how to launch applications that are enjoyable to develop and use. It is a living, breathing resource, that I will continually update as new technologies and best practices emerge.

Current stack includes:

MDX

With that, let's get started. Below are my recommended steps to start a new project.

1. Install NextJS

Open your terminal and run the following command:

npx create-next-app@latest

💡 To avoid needing to move your project later, cd to the folder where you store your projects before running this command

You'll see the following questions, below are my recommended responses:

What is your project named? [myappname]
Would you like to use TypeScript? [Yes]
Would you like to use ESLint? [Yes]
Would you like to use Tailwind CSS? [Yes]
Would you like to use `src/` directory? [No]
Would you like to use App Router? (recommended) [Yes]
Would you like to customize the default import alias (@/*)? [No]

For additional details, see: https://nextjs.org/docs/getting-started/installation

After your project is created, navigate to it within your editor.

2. Add Prettier

Prettier is a code formatting that I recommended using for all projects to maintain code consistency and readability.

The simplest way to use prettier is by installing the VSCode extension: Prettier - Code formatter

Once installed, create a .prettierrc file in the root of your project and add the following rules:

{
  "trailingComma": "all",
  "printWidth": 120,
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "jsxBracketSameLine": true,
  "arrowParens": "always"
}

For more information on these rules, see: https://prettier.io/docs/en/options.html

3. Check environment variable files

Ensure a .env.local file exists in the root of your project (create one if not). You'll use this file to store API keys and other sensitive, environment-specific variables. Anytime you add a .env file, triple-check that it has been added to .gitignore.

.env.local is all you need to start developing locally. However, I'd recommend also creating a .env.production file at this point (AND adding it to .gitignore). It's a good idea to do this the start of a project so that (A) you have a place to put production variables locally (B) you get in the practice of maintaining development and production environment variables in unison (C) you don't hastily add the file later and forget to add it to .gitignore.

4. Run app locally

OK, now you're ready to run your app locally. With your project open, open a terminal, and run the following command:

npm run dev

5. Push to Github

Install Github Desktop https://desktop.github.com/
Add repository Add >> Add Existing Repository
Choose Local Path of Project
Publish

6. Deploy

There are various ways to deploy your app. If speed and convenience are the priority, I recommend starting with Vercel https://vercel.com/.

Setup an account
Connect your Github account
Choose your project's repo

...and voilà — your app is now continuously deployed, each time you push to Github.

Notes:

While you could technically wait to setup deployment, it's a good a idea to do it right away, as you're likely to encounter build errors once you start writing code. Build and deploy your app early and often so that you can more easily debug issues as they arise.
Remember that once you start adding environment variables to .env.local don't forget to also add the production version of those variables to Vercel: https://nextjs.org/docs/app/building-your-application/configuring/environment-variables. Deployed/hosted instances of your application will need environment variables to be hosted and accessible, in order to function properly.

🎉 Congrats! Initial setup is complete and you're now ready to start building your app!

The Basics