WWW-Web

This repo uses VSCode's Dev Containers extension to standardize the development environment and avoid headache-inducing installation. All development will happen inside a Docker container which installs the same dependencies and versions on every developer's machine.

Installation

You can either run the project locally or via Github codespaces. Since Github has way better servers than most of us and running our projects can be quite demanding for most computers, we recommend using codespaces. In either case, the actual experience when coding will be similar.

Using Codespaces

1. Go to the main Github page for WWW-Web and click the green "Code" button near the top.
2. Go to the codespaces tab and create a new codespace.
3. Everything should set itself up automatically, wait until it says "your application running is available at...".
4. If you want to get back to the codespace after closing it, go to the repository and once again click the green CODE button. It should show up in a list. You can also choose to open the codespace using vscode if you don't like the URL bar at the top, by clicking the three dots next to the codespace.
5. After configuration has finished in the codespace, it should say Done. Press any key to close the terminal (if a terminal opened automatically).
6. Move on to "Get the Frontend Running" for the next steps.

Running Locally

0. Using Windows? First set up WSL 2.

   • Press Windows ⊞ -> "Turn Windows features on or off". Enable "Windows Subsystem for Linux".
   • Open Powershell as admin.
   • wsl --install
   • wsl --set-default-version 2
   • wsl --install -d Ubuntu-22.04
   • wsl --set-default Ubuntu-22.04
   • For more info: Microsoft documentation

1. You need docker installed.

   • If you're using Windows, install Docker Desktop. Make sure you select Use WSL 2 instead of Hyper-V if the option is presented.
   • If you're on MacOS or Linux, you want to install the regular Docker CLI. Here's a Linux guide, if you're using MacOS you can ask one of the su-permen. You might need to add yourself to the docker group so VSCode can run the docker process as your user instead of root.

2. Open a new VSCode window and install Dev Containers extension from the Extensions menu.

3. Open the Command Palette (Ctrl + Shift + P / Cmd + Shift + P) and select Dev Containers: Clone Repository in Container Volume.... Select GitHub, then enter fsek/WWW-Web.git.

4. After configuration has finished in the open terminal, it should say Done. Press any key to close the terminal.

5. From now on, whenever you want to open this project: Open a new VSCode window and in Recent, find WWW-Web in a unique volume [Dev Container]. Don't re-run Clone Repository... from step 3. You can now:

Get the Frontend Running

1. Open a new Bash terminal (Ctrl + Shift + Ö) and run: bun install, bun run generate-api and then bun run dev. If you are developing the backend application and want to test the frontend against it, make sure to specify the backend URL in the .env file with NEXT_PUBLIC_API_BASE_URL="http://localhost:8000". Otherwise https://stage.backend.fsektionen.se will be used.

   • If you want to run against the local backend and start WebWebWeb in a VSCode window, closing the window or switching to WWW-Web in the same VSCode window will terminate the backend. Open another window instead.

2. Go to http://127.0.0.1:3000/ (or http://localhost:3000/admin) for the website where you can see the project🎉🥳🇱 🇬 🇹 🇲

Troubleshooting

• Ctrl + Shift + P and type Rebuild Container.
• Check if you alredy have an open port in the port window in VSCode. Delete it, press Ctrl + Shift + P and type Rebuild Container.

Working on WWW-Web

• To install new components:
  • Go to https://ui.shadcn.com/
  • Follow the instructions there

Tips and tricks

• Use https://www.creative-tim.com/twcomponents/cheatsheet to find different Tailwind css classes