From 88bbc80748823352a401a8f72921aaeb61d51b6a Mon Sep 17 00:00:00 2001 From: Gabe Kangas Date: Fri, 22 Apr 2022 22:13:38 -0700 Subject: [PATCH] Update readme --- web/README.md | 47 +++++++++++++++++++++++++++++++---------------- 1 file changed, 31 insertions(+), 16 deletions(-) diff --git a/web/README.md b/web/README.md index 06545497a..608e06a6d 100644 --- a/web/README.md +++ b/web/README.md @@ -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 -npm run dev -# or -yarn dev -``` +### Getting Started -**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. - A list of API end points can be found here: https://owncast.online/api/development/ -### Auth-ing for APIs +### Admin Authentication + +The pages until `/admin` require authentication to make API calls. + Auth: HTTP Basic + username: admin + pw: [your streamkey] - -## Learn More +### Learn More 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! +## 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``` \ No newline at end of file