diff --git a/web/.storybook/stories-category-doc-pages/Development.stories.mdx b/web/.storybook/stories-category-doc-pages/Development.stories.mdx new file mode 100644 index 000000000..0f1e968ba --- /dev/null +++ b/web/.storybook/stories-category-doc-pages/Development.stories.mdx @@ -0,0 +1,85 @@ +import { Canvas, Meta, Story } from '@storybook/addon-docs'; + + + +--- +title: "How to work on Owncast" +description: The technical details for those wishing to take part in Owncast development. +tags: + [ + development, + contribute, + open-source, + github, + git, + go, + react, + typescript, + contributing, + ] +aliases: [/docs/building] +type: toc +toc: true +--- + +Owncast is a straightforward web application and compared to many projects is very easy to get running locally and contributing to. + +- The backend is written in [Go](https://go.dev/). +- The frontend is written in [React](https://reactjs.org/). + +If you're interested in contributing to Owncast, here's how you can get started. + +## How to start with Frontend development + +The web frontend of Owncast is written in React with TypeScript built using [Next.js](https://nextjs.org/). + +You can browse the React components in the project using our [Storybook](https://owncast.online/components) page to get an idea of how the frontend is structured. + +1. Clone the Owncast repository with `git clone https://github.com/owncast/owncast`. +1. Change to the `webv2` branch with `git checkout webv2`. + +### Run the web project + +1. Change to the `web` directory and install dependencies with `npm install`. +1. Start the development server with `npm run dev`. +1. Open `http://localhost:3000` in your browser. + +You must have an instance of Owncast running locally to connect to. You can run one with `go run main.go` from the root of the repository. Read more details about running development Owncast under the backend section. + +### Learn about how to write React Components with Owncast + +We have a [short document](https://github.com/owncast/owncast/blob/webv2/web/components/_COMPONENT_HOW_TO.md) outlining the specifics of the hows and whys of our specific component approach. + +### Use Storybook to update and create components + +Storybook is a tool that allows you to create and test components in isolation. It's a great way to develop new components and test them out without running a copy of the Owncast server. + +1. Run `npm run storybook` to start the Storybook server. +1. Open `http://localhost:6006` in your browser. +1. Navigate the Storybook interface to browse and test components. + +## How to start with Backend development + +The backend of Owncast is written in Go. It operates as a web and API server, inbound RTMP ingestion server, outbound HLS distribution server, and chat server. + +1. Ensure you have the [Go programming language](https://go.dev/dl/) tools installed for your system. +1. Clone the Owncast repository with `git clone https://github.com/owncast/owncast`. +1. A c compiler and tooling must be available on your system. Generally this means installing `gcc` and its development libraries. +1. Run `go run main.go` from the root of the repository. + +### Go Linting + +We use golangci-lint to lint our Go code. While optional, it is a useful tool to assist you in writing better Go code. You can install it from the [golangci-lint](https://golangci-lint.run/usage/install/#local-installation) website. + +## Run a development stream + +Many features are only enabled when a stream is live. You can run a local stream using any video file you have around by running: + +```bash +./test/ocTestStream.sh somevideofile.mp4 +``` + +## If you haven't yet, find an issue to work on + +Visit our [Good First Issues](https://github.com/owncast/owncast/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) list to find something that might be a good fit for you to start on. Otherwise, feel free to drop into our [community chat](https://owncast.rocket.chat) and say hi and we can get to know you and see where you'd like to take part. + diff --git a/web/.storybook/stories-category-doc-pages/Emoji.stories.mdx b/web/.storybook/stories-category-doc-pages/Emoji.stories.mdx index f74d2cfd0..965055bd4 100644 --- a/web/.storybook/stories-category-doc-pages/Emoji.stories.mdx +++ b/web/.storybook/stories-category-doc-pages/Emoji.stories.mdx @@ -1,5 +1,3 @@ - - import { Canvas, Meta, Story } from '@storybook/addon-docs'; import { Image, ImageRow } from './ImageAsset'; @@ -9,122 +7,126 @@ import { Image, ImageRow } from './ImageAsset'; ## Blob - - LICENSE - - + + + LICENSE + + ## Conigliolo96 - - LICENSE - - + + + LICENSE + + ## Dog - - LICENSE - - + + + LICENSE + + ## Mutant - - LICENSE - - + + + LICENSE + + diff --git a/web/.storybook/stories-category-doc-pages/WebComponents.stories.mdx b/web/.storybook/stories-category-doc-pages/WebComponents.stories.mdx index 85294c265..3fe62117f 100644 --- a/web/.storybook/stories-category-doc-pages/WebComponents.stories.mdx +++ b/web/.storybook/stories-category-doc-pages/WebComponents.stories.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'; - + # How we develop components