LogalDeveloper/owncast
0
Fork 0
Code Activity

Update readme

Browse Source
This commit is contained in:
Gabe Kangas
2022-04-22 22:13:38 -07:00
parent 79bfa0145f
commit 88bbc80748
1 changed files with 31 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
web/README.md
View File

@@ -1,37 +1,45 @@
This is a [Next.js](https://nextjs.org/) project with [TypeScript](https://www.typescriptlang.org/), [Sass](https://sass-lang.com/) styling, using [Ant Design](https://ant.design/) UI components. # Owncast Web
## Getting Started ## Owncast Web Frontend
**First**, run the development server: 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.
```bash ### Getting Started
npm run dev
# or
yarn dev
```
**Second**, 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. **First**, install the dependencies.
```npm install```
In production this Admin instance would ideally live on the domain as your Owncast instance, for example: `myowncast-site.com/admin`. So open [http://localhost:3000/admin](http://localhost:3000/admin) with your browser to see the result. ### Run the web project
You can start editing a page by modifying `pages/something.js`. The page auto-updates as you edit the file. 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.
Add new pages by adding files to the `pages` directory and [routes](https://nextjs.org/docs/api-reference/next/router) will be available for this new page component. **Next**, start the web project with npm.
```npm run dev```
### 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.
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. 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.
A list of API end points can be found here: A list of API end points can be found here:
https://owncast.online/api/development/ https://owncast.online/api/development/
### Auth-ing for APIs ### Admin Authentication
The pages until `/admin` require authentication to make API calls.
Auth: HTTP Basic Auth: HTTP Basic
username: admin username: admin
pw: [your streamkey] pw: [your streamkey]
### Learn More
## Learn More
To learn more about Next.js, take a look at the following resources: To learn more about Next.js, take a look at the following resources:
@@ -40,3 +48,10 @@ To learn more about Next.js, take a look at the following resources:
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## 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:
```npm run storybook```