Skip to content
Snippets Groups Projects
user avatar
eugenijm authored
Use the WebFinger account URI (acct) in the status form when mentioning the user from their account page
dfa85d91
History

Fedi-FE

PWA client for Pleroma instances. Built with Ember.

Home Timeline

Prerequisites

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

Setup

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

Deploying a FediFE build to Pleroma

  • Requires Pleroma develop branch until Pleroma 2.1 release
  • 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

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

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

Further Reading / Useful Links