project setup

Project Setup

For frontend-applications I was thinking of setting up a complete project that I can potentionally reuse as it will be using a framework of (well thought out) choice(s).

Table of Content

• Prep step
• First step
• Client setup
• Backend setup
• Root setup

Prep step

To prepare this repository for the full scale of my idea I had to decide a few things. How do I want to run this project, how can I run multiple directories, and what do I want in each directory?

For the first two questions I decided to use Yarn. The reason? It has workspaces _{(yes npm has workspaces too but its quite fresh)}. Workspaces allows the developer to split the project in sub-components within a single repository. Each directory still keeps its own dependencies and what not but makes it easier to run commands without commands that look like this:

  cd client && next dev && cd ../backend && yarn run start

Instead in the root of the repository I can run:

  yarn run dev

How? Well Workspaces makes you define workspaces in the package.json of each directory and in the root I have a package called npm-run-all that runs multiple commands with globs.

that is workspaces and running multiple instances in a nut shell, but if you wish to go indepth I recommend reading the documentation of yarn about workspaces.

To have it functional and working there are some requirements:

• Each package.json has a name. E.g. "name": "backend",
• A version. E.g. 1.0.0
• One of the childs have the dependency for the other.
• the root directory has the package npm-run-all

example:

// root package.json
{
  "private":"true",
  "version": "1.0.0",
  "workspaces": ["client", "backend"],
  "scripts": {
    "dev:backend": "cd backend && nodemon index.js",
    "dev:client": "cd client && next dev",
    "dev": "run-p dev:*",
  }
}
  // backend package.json
{
  "name": "backend",
  "version": "1.0.0",
  "dependencies": {
    "client": "1.0.0",
}

  # Command to run both dev instances
  yarn run dev

First step

First step of this process was figuring out what I wanted and how. Considering I have a slight advantage compared to the others by knowing the general direction of this course I decided to create two directories, client and backend.

Client consists of the framework of my choice whereas backend is a simple nodejs server with express for potentional API shenanigans.

After that I did as I explained in the prep step and bob's your uncle you can run two applications with ease.

Client setup

After setting the structure of the repository, I decided to install my framework of choice, Next.js.

  yarn create next-app . --ts

Q: What is the --ts flag? A: The --ts flag stands for --Typescript. For this project I plan to use Typescript.

Q: What is Next.js A: A framework created by Vercel, it integrates React for developing single-page apps. It makes server-side rendering very easy. It adds all kind of features for better optimization, performance, faster development and previewing.

Backend setup

The setup of the backend compared to the prep step and client was easy as pie. I setup a node application with some linting and created a basic API GET route.

Root setup

Besides the setup for the previous two steps I was creating some scripts that I can run to make life easier for myself.

  "scripts": {
    "dev:backend": "cd backend && nodemon index.js",
    "dev:client": "cd client && next dev",
    "dev": "run-p dev:*",
    "lint:backend": "cd backend && yarn run lint",
    "lint:client": "cd client && next lint",
    "lint": "run-s lint:*"
  },