Try out our new PC setup tool (opens in a new tab)!
Handbook
Boostrapping a Project

Setting Up a Frontend Project

Last updated by Noel Varanda (opens in a new tab),
Nx
Monorepo
Code Sharing
Architectural Best Practices
Next.Js
React
Server-Side Rendering
Static Site Generation
Seo Optimization
Repository Structure
Monorepo
Multi-Repo
Vite
Webpack
Tailwindcss

The following guide applies the principles set in "Scaling Applications" and takes learnings from "Architectural Decisions" to help you choose the tools that best suit your project.

Using nx to bootstrap a project

This guide will go through how to setup your frontend repo and provide valuable resources along the way.

Why nx?

  • Improved developer experience through streamlined development processes and automation.

  • Code sharing and modularity with a monorepo structure for efficient code reuse.

  • Promotes architectural best practices for maintainability and scalability.

  • Built-in support for testing and continuous integration workflows.

  • Seamless integration with popular frontend tools and frameworks.

  • Performance optimization with intelligent caching and selective building.

  • Active community support and comprehensive documentation for learning and leveraging Nx effectively.

Creating the app

nx.dev (opens in a new tab) is a powerful development toolkit that allows for the creation of extensible plugins and projects. It simplifies the setup of frontend projects, including support for monorepos, code sharing, and architectural best practices.

Explore NX.dev and bootstrap your frontend project (opens in a new tab)

Create project

Run the following command:

npx create-nx-workspace@latest

You will be asked a series of prompts which allow you to structure the repo the best way possible.

To understand how to respond to the prompts, refer to the choices along the way section below. Here is an example of setting up the fe.engineer (opens in a new tab) website, along with our decision-making process.

✔ Where would you like to create your workspace? · handbook
✔ Which stack do you want to use? · react
✔ What framework would you like to use? · nextjs
✔ Standalone project or integratd monorepo? · integrated
✔ Application name · fe.engineer
✔ Which bundler would you like to use? · vite
✔ Default stylesheet format · css
✔ Enable distributed caching to make your CI faster · Yes

App structure

The output should be a repo of the following sort:

.
├── README.md
├── apps
├── babel.config.json
├── jest.config.ts
├── jest.preset.js
├── libs
├── node_modules
├── nx.json
├── package-lock.json
├── package.json
├── pnpm-lock.yaml
├── tools
└── tsconfig.base.json

Nx handles the complex overhead tasks involved in frontend projects, such as repository management, transpiling, linting, formatting, and bundling.

Install dependencies

Finally install the project:

pnpm install

Run app

And run the app:

npx nx serve handbook

It's that simple!

Read the Nx docs (opens in a new tab) to understand the intricacies of managing your repo. It's highly worth the time to understand how package management works across multiple apps and using the nx.json file.

Choices along the way

Framework

The choice of framework for the project can significantly impact its development, performance, and maintainability.

Next.js: Next.js (opens in a new tab) is a React framework that adds powerful features to enhance the development experience, such as server-side rendering (SSR), static site generation (SSG), automatic code splitting, and API routes. It provides an opinionated structure and simplifies common tasks, enabling faster development and improved performance.

React (No Framework): Using React without a specific framework means having more flexibility and control over the project's architecture and tooling choices.

💡

Next.js can be useful for e-commerce websites, content-heavy blogs or news platforms, static websites with dynamic components, or seo-optimized applications.

React can be useful for single-page applications (SPAs), lightweight, simple websites, developer-friendly prototyping.

Decision Factors

  • Do you need server-side rendering (SSR) or static site generation (SSG)?
    • Yes: Consider Next.js, as it provides built-in support for SSR and SSG.
    • No: Move to the next question.

  • Do you have complex routing requirements?

  • Do you need built-in API routes and serverless functions?

  • Are you concerned about SEO and page load performance?
    • Yes: Consider Next.js, as it optimizes SEO and performance through features like server-side rendering and static site generation.
    • No: Move to the next question.

  • Are you looking for a lightweight and minimalistic solution?
    • Yes: Choose React, as it provides a simpler and more lightweight setup compared to Next.js.
    • No: Consider Next.js for its additional features and capabilities.

Repository structure

Standalone: A standalone project housing the code for a single app.

Monorepo: A monorepo (monolithic repository) houses the entire codebase of a project in a single repository. It allows for easier code sharing, version control, and centralized management. Read more about monorepo (opens in a new tab).

Multi-repo: In a multi-repo setup, the codebase is divided into multiple repositories, each representing a specific component or module of the application. This approach provides better isolation, flexibility, and scalability. Read more about multi-repo (opens in a new tab).

Deciding Factors

  • Factor in team size, project complexity, collaboration requirements, and development workflows.

  • Use a standalone for throw-away projects, or projects you know won't scale.

  • Use a monorepo for smaller teams or projects with extensive code sharing needs. This should be most of the time.

  • Multi-repo can be preferred for complex projects with independent components.
💡

Important to note: Only go into a multi-repo structure when you absolutely need to.

Which bundler

Read through our comprehensive gude on bundlers (it's very dumbed down and simple). In nx we only get two choices (Vite (opens in a new tab) or Webpack (opens in a new tab)).

Quick tips

  • Use Vite if you're developing a small to medium sized project.

  • Use Webpack if you require heavy configuration, have complex dependency graphs, or are creating complex projects (e.g. microfrontends).

Default stylesheet format

Read about styling to understand how best to make this decision.

We get the folllowing options:

Between CSS Preprocessors and CSS-in-JS, it is recommended to use CSS-in-JS. It's a more modern approach to styling and has a lot of benefits.

However if you prefer to use more modern technologies such as TailwindCSS, then you should choose CSS and install it at a later stage.

Keep up to date with any latest changes or announcements by subscribing to the newsletter below.