Random Afkorting voor Digitale Informatie Overdracht.
This is a Vite + React project that is used to display information on the TV screen in the Sticky room. This information is read in from Koala (for activities), GitHub (for recent commits) and Contentful (for advertisements, board messages, etc.), and displays things like upcoming activities and peculiar quotes.
We recommend installing the Docker engine, as well as Visual studio code with the Devcontainers extension.
-
Clone this repository to a location you prefer.
-
Then, open the clone repository in Visual Studio Code or some other IDE out there, as long as the IDE has support for the Devcontainers extension
-
Open the project in a dev containter. The default shortcut for this in VS Code is: CTRL+Shift+P, and then typing
open folder in container
. You may have to select the project folder.[!NOTE] > If you open the project in a dev container for the first time, note that the initial installation may take a while. Docker is essentially creating a mini pc inside your pc, which can be up to 2gb of files to download. Please do not close your editor, but wait untill the left bottom part of your editor states
Dev Container: Radio - SV Sticky
. It is then you can proceed on to step 4. -
Open a terminal in the dev container. You can do this by pressing
Terminal
(in the hotbar), thenNew terminal
. Alternatively, you can use the default keybinds: CTRL+(Shift)+`. -
Finally, you need to provide your local installation of radio with some secrets.
- Copy
sample.env
to.env
. - Fill in all the missing secrets in
.env
. If you do not have access to them, feel free to ask some member of the ITCrowd for them!
- Copy
To start the radio, run npm run dev
. That's all! Visit http://localhost:5173,
and if you provided all the right secrets, you'll see the radio running.
Also check http://localhost:5173/?internal=true to see the quotes and board ads.
Lets quickly display all posible ways to run and build radio:
npm run dev # Starts a dev-server with linting and hot-reload capabilities!
npm run lint # Check if your code adhires to all of our standards
npm run build # Compile the website
npm run preview # Do not rebuild nor change any files, just host the compiled files
We work with React, and react compiles your website into the dist
folder.
Running npm run build
generates the dist
folder, and running npm run preview
hosts the files in the dist
folder locally.
Please note that npm run preview
does not recompile! It also fails if you have no dist
folder yet.
Running npm run dev
starts a developer enviroment, which does not compile anything, and instead
interprets your code in real time with hot-reloading; Vite will automatically reload your browser when you change any file.
That's it. Happy hacking!