2022-04-23 07:13:38 +02:00
# Owncast Web
2020-09-30 23:59:20 +02:00
2022-04-23 07:13:38 +02:00
## Owncast Web Frontend
2020-09-30 23:59:20 +02:00
2022-04-23 07:13:38 +02:00
The Owncast web frontend is a [Next.js ](https://nextjs.org/ ) project with [React ](https://reactjs.org/ ) components, [TypeScript ](https://www.typescriptlang.org/ ), [Sass ](https://sass-lang.com/ ) styling, using [Ant Design ](https://ant.design/ ) UI components.
2020-09-30 23:59:20 +02:00
2022-04-23 07:13:38 +02:00
### Getting Started
2020-09-30 23:59:20 +02:00
2022-04-23 07:13:38 +02:00
**First**, install the dependencies.
2021-05-06 23:48:10 +02:00
2022-05-12 08:31:31 +02:00
`npm install --include=dev`
2021-05-06 23:48:10 +02:00
2022-04-23 07:13:38 +02:00
### Run the web project
2020-09-30 23:59:20 +02:00
2022-04-23 07:13:38 +02:00
Make sure you're running an instance of Owncast on localhost:8080, as your copy of the admin will look to use that as the API.
2020-10-01 00:21:54 +02:00
2022-04-23 07:13:38 +02:00
**Next**, start the web project with npm.
2022-05-12 08:31:31 +02:00
`npm run dev`
2020-10-01 00:21:54 +02:00
2022-04-28 23:36:05 +02:00
### Components and Styles
You can start the [Storybook ](https://storybook.js.org/ ) UI for exploring, testing, and developing components by running:
2022-05-12 08:31:31 +02:00
`npm run storybook`
2022-04-28 23:36:05 +02:00
This allows for components to be made available without the need of the server to be running and changes to be made in
isolation.
2022-04-23 07:13:38 +02:00
### Update the project
You can add or edit a pages by modifying `pages/something.js` . The page auto-updates as you edit the file.
[Routes ](https://nextjs.org/docs/api-reference/next/router ) will automatically be available for this new page components.
2020-09-30 23:59:20 +02:00
2022-04-23 07:13:38 +02:00
Since this project hits API endpoints you should make requests in [`componentDidMount` ](https://reactjs.org/docs/react-component.html#componentdidmount ), and not in [`getStaticProps` ](https://nextjs.org/docs/basic-features/data-fetching ), since they're not static and we don't want to fetch them at build time, but instead at runtime.
2020-10-04 05:59:25 +02:00
A list of API end points can be found here:
2021-05-06 23:48:10 +02:00
https://owncast.online/api/development/
2020-10-04 05:59:25 +02:00
2022-04-23 07:13:38 +02:00
### Admin Authentication
The pages until `/admin` require authentication to make API calls.
2021-05-06 23:48:10 +02:00
Auth: HTTP Basic
2022-04-23 07:13:38 +02:00
2020-10-04 05:59:25 +02:00
username: admin
2022-04-23 07:13:38 +02:00
pw: [your streamkey]
2020-10-04 05:59:25 +02:00
2022-04-23 07:13:38 +02:00
### Learn More
2020-09-30 23:59:20 +02:00
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation ](https://nextjs.org/docs ) - learn about Next.js features and API.
- [Learn Next.js ](https://nextjs.org/learn ) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository ](https://github.com/vercel/next.js/ ) - your feedback and contributions are welcome!
2020-10-04 05:59:25 +02:00
2022-04-23 07:13:38 +02:00
## Style guide and components
We are currently experimenting with using [Storybook ](https://storybook.js.org/ ) to build components, experiment with styling, and have a single place to find colors, fonts, and other styles.
To work with Storybook:
2022-05-12 08:31:31 +02:00
`npm run storybook`
