Skip to content

Getting_Started

Jump to bottom
Theodor Kvalsvik Lauritzen edited this page Sep 25, 2024 · 4 revisions

Getting started

Project Next is a full-stack web application developed with next.js. This page will guide you through the steps to start developing it.

Terminal

If you can use the terminal for basic use, you can just go ahead and skip this section.

A terminal or command line is an interface to your machine through text. You can access it by searching for cmd on Windows or terminal on Mac. As the File Explorer (Windows) and Finder (Mac) the terminal is opened in a directory (also known as folder). The current directory is often displayed in the prompt. The prompt is the text in front of our cursor, where you can type commands.

If you want to change the directory, use the change directory command: cd <directory> and replace <directory> with the name of the directory you wish to change to. To go upwards one directory, type cd ... To go to your home directory, type cd.

To list files and directories in a directory, use the list command: ls. On Windows, you may have to use the command dir. If you want UNIX commands on Windows, then check for the setting to include UNIX commands when you are installing Git in the next section.

These two commands should be enough to finish this guide.

Installation

  1. Make sure you have Git installed
    • To check if git is installed, type git --version. If an error occurs, then you need to install Git. Install git from this webpage
  2. Make sure Git is connected to GitHub with ssh keys.
  3. Install docker, if docker isn't installed already.
    • On Windows, make sure to install wsl2 first! Follow this guide to install WSL with Docker.
    • Then download Docker desktop from this webpage and install it.
  4. Clone Project next to you machine.
    • Open a terminal and find a suitable place on your machine.
    • Type the command:
git clone [email protected]:vevcom/projectNext.git

Setup a development environment

The project runs with Node.js 20. It's recommended that you develop inside our development container rather than installing Node.js directly. If you want to install Node.js, you can do so here. If you installed Node.js directly, you can skip the next section about development containers.

Development container

A development container is a VSCode feature that lets everybody on the team develop in the same environment. With a development container, the code runs in a similar environment as the server and all others in Vevcom. This prevents us from implementing features that only work on certain machines.

  1. Make sure you have Visual Studio Code installed
    • Visual Studio code can be downloaded here or with brew with this command brew install --cask visual-studio-code
  2. Download the Dev Containers extension.
    • Do this by clicking on the extensions tab to the left in VSCode.
    • Then search by Dev Containers and click install.
  3. Make sure the Docker daemon is running
    • Start the Docker daemon by opening Docker Desktop.
  4. Open the project next repo that you cloned from GitHub.
  5. Click on the Reopen in Conatiner button if a popup occurs
    • If the popup never occurs, open the command palette (ctrl + shift + p on Windows cmd + shift + p on Mac) and run the command Dev Containers: Reopen in Container. Type the command to run it.
  6. The first time you run the container, it has to download and build the environment. It's recommended that you open the logs to see the progress since this will take several minutes.
  7. If you are missing some features or programs from your host machine, please refer to this guide about dotfiles in development containers. If you aren't familiar with dotfiles skip this step.

Last steps

Next we need to install the last dependencies and generate some code.

  1. Install the dependencies by running the following command inside the git repo (If you are inside the development container and haven't changed directory, you are at the right place.)
npm install
  1. Then setup prisma files by running
npx prisma generate
  1. Afterwards copy the file default.env to .env. The .env file contains information on the current environment.
  2. At last copy the file next-env.default.d.ts to next-env.d.ts.

Congratulations, you are now ready to start Project next in development!

Development

To start Project next in development use the following command

docker compose -f docker-compose.dev.yml up --build

WARNING: On Windows, the command cannot be run inside the development container. So, you'll need to open a new terminal outside the container to run it. This means you cannot use the terminal in VSCode.

The last --build tag is only necessary if some dependencies have changed or something other fundamental has changed.

When the container runs, Project Next should be available on localhost. When you make changes, they will be automatically updated when you save the file. That means they are reflected on both the front end and back end.

The stack

A stack is a list of the different technologies and frameworks we are using. Our stack consists of

Roadmap to understand projectnext

  1. General Knowledge First you should familiarize yourself with react, next.js then move on to understanding the basics of typescript and scss. You should also be somewhat familiar with Prisma and the general use of sql databases.

  2. Download Docker and make sure you are able to use ii start projectnext in both dev and prod. You can read more about Docker in Docker but the basics on how to start are written above.

  3. Read about our project structure here

  4. Read on how we use git and github in this project here

  5. Read about styling using scss here

After 5. you should have knowledge to be able to start writing code.

  1. Read about how we use server actions here

Footer

Sidebar

Clone this wiki locally