Fedi-FE

PWA client for Pleroma instances. Built with Ember.

Prerequisites

You will need the following things properly installed on your computer.

• Git
• Node.js
• Yarn(new enough that it supports workspaces)
• Ember CLI

Setup

• git clone https://git.pleroma.social/pleroma/fedi-fe.git
• cd fedi-fe
• yarn install

Deploying a FediFE build to Pleroma

• Requires Pleroma 2.1 or later
• Update your Pleroma server configuration e.g., config :pleroma, :frontends, primary: %{"name" => "fedife", "ref" => "dist"}
• run
  • yarn build
  • copy the dist directory to your static_dir, e.g., instance/static/frontends/fedife/dist
  • Start your Pleroma instance

Running / Development

• npm start
• Visit your app at http://localhost:4200.

Note: Because I like working with real data and an API for this already exists, I have our Mirage server turned off in development.

Developing against local pleroma-api

• Ensure you have postgres installed locally,
• If you dont, you can easily install via homebrew + run /usr/local/opt/postgres/bin/createuser -s postgres to create the default postgres user
• Clone the api: https://git.pleroma.social/pleroma/pleroma
• run
  • mix deps.get
  • mix deps.compile
  • mix ecto.create
  • mix ecto.migrate
  • mix phx.server

Consuming existing Phoenix instance

• API_BASE_URL=http://localhost:4000 npm start

Performance and Error monitoring.

Right now, during our beta phases, we have some perf monitoring and error tracking enabled. It's only active if SENTRY_DSN is present during build time. See DEBUGGING.md for more information.

If you want to rip it all out, you will want to remove the sentry service, the sentry deps from package.json, and the ember-user-performance-monitoring lib from package.json.

SVG's

• We are using SVG Jar.
• Just add an SVG to the public directory, restart the development server.
• Invoke SVG's like so: {{svg-jar "dockyard-logo" width="40px" height="40px"}}

Styleguides

KSS

• We are using KSS styleguides.
• They are automatically created when running the development server.
• The server will spit out a file path to open the generated styleguide.
• Open that file in your browser. (paste that path into your browsers url bar)
• The styleguide will rebuild on changes within app/styles.
• To see the new changes, refresh the page.

Sassdoc

• We are using SASSDOC.
• They are automatically created when running the development server.
• The server will spit out a file path to open the generated docs.
• Open that file in your browser. (paste that path into your browser url bar);
• The docs will rebuild on changes within app/styles.
• TO see the new changes, refresh the page

Code Generators

Make use of the many generators for code, try ember help generate for more details

Tests

Running Tests

• ember exam
• ember exam --server
• ember exam --filter='acceptance'

See Ember Exam

Writing Tests

• Network/Api - Mirage
• Stubs/Spys - Sinon
• Selecting Dom Elements - ember-test-selectors

Linting

• yarn lint:hbs
• yarn lint:js
• yarn lint:js --fix

Building

• ember build (development)
• ember build --environment production (production)

Debugging bundle size

• After starting the ember server, visit https://localhost:4200/_analyze to view the bundle analyzer

Debugging service worker

• Navigate to chrome://serviceworker-internals/

Further Reading / Useful Links

• Pleroma
• Activity Pub
• ember.js
• ember-cli
• PWA's
• Development Browser Extensions
  • ember inspector for chrome
  • ember inspector for firefox