Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hyperspacedev/hyperspace
The new beautiful, fluffy client for Mastodon in React + TypeScript
https://github.com/hyperspacedev/hyperspace
electron mastodon material-design material-ui reactjs
Last synced: about 1 month ago
JSON representation
The new beautiful, fluffy client for Mastodon in React + TypeScript
- Host: GitHub
- URL: https://github.com/hyperspacedev/hyperspace
- Owner: hyperspacedev
- License: other
- Archived: true
- Created: 2019-03-25T19:29:39.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-06-17T00:00:55.000Z (over 2 years ago)
- Last Synced: 2024-04-28T01:55:26.657Z (6 months ago)
- Topics: electron, mastodon, material-design, material-ui, reactjs
- Language: TypeScript
- Homepage: https://hyperspace.marquiskurt.net
- Size: 19.7 MB
- Stars: 181
- Watchers: 11
- Forks: 26
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Contributing: .github/contributing.md
- Funding: .github/FUNDING.yml
- License: LICENSE.txt
- Code of conduct: .github/code_of_conduct.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- awesome-starred - hyperspacedev/hyperspace - The new beautiful, fluffy client for Mastodon in React + TypeScript (reactjs)
- alternative-front-ends - Hyperspace - platform Mastodon client for the fediverse written in TypeScript and React **[In maintenance mode](https://github.com/hyperspacedev/hyperspace/issues/232)** (Overview / Mastodon)
README
# Hyperspace Desktop
The new beautiful, fluffy client for the fediverse written in TypeScript and React
[](https://matrix.to/#/#hypermasto:matrix.org)
[](https://discord.gg/c69AXwk)
 [](https://github.com/hyperspacedev/hyperspace/releases) [](LICENSE.txt) [](https://snapcraft.io/hyperspace)
Socialize and communicate with your friends in the fediverse (ActivityPub-powered social networks like Mastodon and Pleroma) with Hyperspace Desktop. Browse your timelines, check in with friends, and share your experiences across the fediverse in a beautiful, clean, and customizable way.
What Hyperspace Desktop offers:
- A clean, responsive, and streamlined design that fits in with your Mac
- Support for switching between accounts to access the accounts you use the most
- Customization support, ranging from several beautiful themes to masonry layout and infinite scrolling
- Powerful toot composer with media uploads, emojis, and polls
- Activity and recommended views that give you insight on the community/instance you reside in
## Get started
Hyperspace Desktop is available for the major desktop platforms via our downloads page, GitHub, and other store platforms where applicable.
[**Download from our website ›**](https://hyperspace.marquiskurt.net/download)
### Download from a store
[](https://snapcraft.io/hyperspace) [](https://apps.apple.com/us/app/hyperspace-desktop/id1454139710?mt=12)
**via [WinGet](https://github.com/microsoft/winget-cli)**:
```
winget install HyperspaceDesktop
```
## Build from source
To build Hyperspace Desktop, you'll need the following tools and packages:
- Node.js v10 or later
- (macOS-only) Xcode 10 or higher
### Installing dependencies
First, clone the repository from GitHub:
```
git clone https://github.com/hyperspacedev/hyperspace
```
Then, in the app directory, run the following command to install all of the package dependencies:
```
npm install
```
### Testing changes
Run any of the following scripts to test:
- `npm start` - Starts a local server hosted at https://localhost:3000.
- `npm run electron:build` - Builds a copy of the source code and then runs the app through Electron. Ensure that the `location` key in `config.json` points to `"desktop"` before running this.
- `npm run electron:prebuilt` - Similar to `electron:build` but doesn't build the project before running.
The `location` key in `config.json` can take the following values during testing:
- **https://localhost:3000**: Most suitable for running `npm start` or running via `react-scripts`.
- **desktop**: Most suitable for when testing the desktop application.
> Note: Hyperspace Desktop v1.1.0-beta3 and older versions require the location field to be changed to `"https://localhost:3000"` before running.
### Building a release
To build a release, run the following command:
```
npm run build
```
The built files will be available under `build` as static files that can be hosted on a web server. If you plan to release these files alongside the desktop apps, compress these files in a ZIP.
#### Building desktop apps
You can run any of the following commands to build a release for the desktop:
- `npm run build:desktop-all`: Builds the desktop apps for all platforms (eg. Windows, macOS, Linux). Will run `npm run build` before building.
- `npm run build:win`: Builds the desktop app for Windows without running `npm run build`.
- `npm run build:mac`: Builds the desktop apps for macOS without running `npm run build`. See the details below for more information on building for macOS.
- `npm run build:mas`: Builds the desktop apps for the Mac App Store without running `npm run build`. See the details below for more information on building for macOS.
- `npm run build:linux`: Builds the desktop apps for Linux (eg. Debian package, AppImage, and Snap) without running `npm run build`.
- `npm run build:linux-select-targets`: Builds the desktop app for Linux without running `npm run build`. _Targets are required as parameters._
The built files will be available under `dist` that can be uploaded to your app distributor or website.
#### Extra steps for macOS
The macOS builds of Hyperspace Desktop require a bit more effort and resources to build and distribute accordingly. The following is a quick guide to building Hyperspace Desktop for macOS and for the Mac App Store.
##### Gather your tools
To create a code-signed and notarized version of Hyperspace Desktop, you'll need to acquire some provisioning profiles and certificates from a valid Apple Developer account.
For certificates, make sure your Mac has the following certificates installed:
- 3rd Party Mac Developer Application
- 3rd Party Mac Developer Installer
- Developer ID Application
- Developer ID Installer
- Mac Developer
The easiest way to handle this is by opening Xcode and going to **Preferences › Accounts** and create the certificates from "Manage Certificates".
You'll also need to [create a provisioning profile for **Mac App Store** distribution](https://developer.apple.com/account/resources/profiles/add) and save it to the `desktop` folder as `embedded.provisonprofile`.
##### Create your entitlements files
You'll also need to create the entitlements files in the `desktop` directory that declares the permissions for Hyperspace Desktop. Replace `TEAM_ID` with the appropriate Apple Developer information and `BUNDLE_ID` with the bundle ID of your app.
###### entitlements.mac.plist
```plist
com.apple.security.cs.allow-unsigned-executable-memory
com.apple.security.network.client
com.apple.security.files.user-selected.read-write
```
###### entitlements.mas.plist
```plist
com.apple.security.cs.allow-jit
com.apple.security.network.client
com.apple.security.app-sandbox
com.apple.security.cs.allow-unsigned-executable-memory
com.apple.security.application-groups
TEAM_ID.BUNDLE_ID
com.apple.security.files.user-selected.read-only
com.apple.security.files.user-selected.read-write
```
###### entitlements.mas.inherit.plist
```plist
com.apple.security.app-sandbox
com.apple.security.inherit
com.apple.security.cs.allow-jit
com.apple.security.cs.allow-unsigned-executable-memory
```
###### entitlements.mas.loginhelper.plist
```plist
com.apple.security.app-sandbox
```
###### info.plist
```plist
ElectronTeamID
TEAM_ID
com.apple.developer.team-identifier
TEAM_ID
com.apple.application-identifier
TEAM_ID.BUNDLE_ID
```
##### Edit `notarize.js`
You'll also need to edit `notarize.js` in the `desktop` directory. Replace ``, ``, and `` with the appropriate information from the app and your account from Apple Developer.
```js
// notarize.js
// Script to notarize Hyperspace for macOS
// © 2019 Hyperspace developers. Licensed under Apache 2.0.
const { notarize } = require("electron-notarize");
// This is pulled from the Apple Keychain. To set this up,
// follow the instructions provided here:
// https://github.com/electron/electron-notarize#safety-when-using-appleidpassword
const password = `@keychain:AC_PASSWORD`;
exports.default = async function notarizing(context) {
const { electronPlatformName, appOutDir } = context;
if (electronPlatformName !== "darwin") {
return;
}
console.log("Notarizing Hyperspace...");
const appName = context.packager.appInfo.productFilename;
return await notarize({
appBundleId: "",
appPath: `${appOutDir}/${appName}.app`,
appleId: "",
appleIdPassword: password,
ascProvider: ""
});
};
```
Note that the password is pulled from your keychain. You'll need to create an app password and store it in your keychain as `AC_PASSWORD`.
##### Build the apps
Run any of the following commands to build Hyperspace Desktop for the Mac:
- `npm run build:mac` - Builds the macOS app in a DMG container.
- `npm run build:mac-unsigned` - Similar to `build:mac`, but skips code signing and notarization. **Use only for CI or in situations where code signing and notarization is not available.**
- `npm run build:mas` - Builds the Mac App Store package.
## Licensing and Credits
Hyperspace Desktop is licensed under the [Non-violent Public License v4+](LICENSE.txt), a permissive license under the conditions that you do not use this for any unethical purposes and to file patent claims. Please read what your rights are as a Hyperspace Desktop user/developer in the license for more information.
Hyperspace Desktop has been made possible by the React, TypeScript, Megalodon, and Material-UI projects as well our [Patrons](patreon.md) and our contributors on GitHub.
## Contribute
Contribution guidelines are available in the [contributing file](.github/contributing.md) and when you make an issue/pull request. Additionally, you can access our [Code of Conduct](.github/code_of_conduct.md).
If you want to aid the project in other ways, consider supporting the project on [Patreon](https://patreon.com/hyperspacedev).