Photon Reddit

Just replace reddit.com/... with photon-reddit.com/... to get started!

A clean and modern Reddit desktop web client.

Photon is a website to browse reddit without any distractions (no ads, no crowded sidebars, no distracting awards).

r/photon_reddit is the official subreddit.

How it looks like

Prerequisites

• node: >= 14.x
• npm: >= 7.5.1

Selfhosting

Commands

Download

git clone https://github.com/ArthurHeitmann/photon-reddit.git
cd photon-reddit

Install dependencies & Build

npm install
npm run build

Start

npm run start

Other commands for development

# auto restart server when js files change
npm run start-dev

# watch for Typescript & Sass file changes and auto recompile
npm run watch

Getting Login to work

These steps are optional but helpful for development (needed if you want to log in).

Go here and create your own reddit app.

1. Name: whatever you want

2. Select

installed app

3. description & about url can be left empty

4. redirect uri: [yourDomain]/redirect

Examples:

• http://localhost:8080/redirect
• https://some-photon-reddit-fork.com/redirect

5. Under /src/static/scripts/utils/consts.ts change AppId and redirectURI to

export const appId = "[generated app id]";
export const rediretURI = "[what you entered in step 4.]";

Environment Variables

Environment variables so far are only for the analytics system. If you use a .env file here is a template:

DB_HOST=
DB_USER=
DB_PW=
DB_PORT=
DB_DB=
analyticsPw=

DB_x is for configuring the mariaDB database. analyticsPw is for a cookie to access the analytics dashboard. More infos in analyticsQueryMiddleware() in src/serverScripts/analytics.ts.

Technical

Frontend

Esbuild is used to transpile and bundle Typescript (vanilla JS) and Scss files. No other frameworks or libraries are used.

Instead of using for example react components with jsx, a mix of the following is used:

// 1. For complex components
export default class Ph_ComponentName extends HTMLElement  {
	// ...
}
customElements.define("ph-component-name", Ph_ComponentName);

const element = new Ph_ComponentName(args);

// 2. Custom makeElement() function (similar to React.createElement)
const element = makeElement("div", { "class": "someClass", "data-tooltip": "tooltip" }, [
	// children
	makeElement("span", null, "Inner Text"),
	makeElement("img", { src: "/img/logo.svg" }),
]);

// 2.5 longer alternative
const element = document.createElement("div");
// ...

// 3. Lazy method for writing a lot of elements at once (escape untrusted string inputs with escHTML() or escADQ())
element.innerHTML = `
	<div class="${classNameVariable}">
		<span>...</span>
		...
	</div>
`;

Structure

/src/static maps to / in the browser.

/src/static/scripts/main.ts is the entry point for the frontend Javascript.

/src/static/style/main.scss is the entry point for the css.

Custom html components are under /src/static/scripts/components

If a component has a custom style its _componentName.scss file lies in the components directory and is registered under /src/static/style/_components.scss

Backend

An express server. Mostly only needed for making cross-origin request for a client that otherwise get CORS blocked (mostly some reddit api calls) and handling new version releases.

node 12.x is not supported because ES6 import {} from "lib" are used instead of require("lib").

Also used for analytics purposes with MariaDB. Except for minimal anonymized data, no user data is stored.

Naming conventions

In general camelCase. Except for custom html tag names then ph-[kebab-case]. Js component classes that extend HTMLElement Ph_PascalCase.

Contributing

^{I don't really know how this works :)}

Basically follow the instructions from here.

Before doing any major changes, first ask me.

Contact

See here: photon-reddit.com/about