LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

added fullstart and customize.md

Browse source
This commit is contained in:
bill bittner 2018-08-09 15:39:32 -07:00
parent 69cd9532d4
commit 411b50d6f4
6 changed files with 353 additions and 121 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

121
README.md
View file

@ -5,7 +5,8 @@ You can create your own custom version of spee.ch by installing this code base a
## Quick start ## Quick start
### Prepare your environment _note: this is the quickstart guide, for an in-depth step-by-step overview visit the [fullstart guide](https://github.com/lbryio/speech/fullstart.md)._
Install Node Install Node
* [link](https://nodejs.org) * [link](https://nodejs.org)
@ -27,8 +28,6 @@ Clone this repo
$ git clone https://github.com/lbryio/spee.ch.git $ git clone https://github.com/lbryio/spee.ch.git
``` ```
### Build and Start the App
Change directory into your project Change directory into your project
``` ```
$ cd spee.ch $ cd spee.ch
@ -45,29 +44,22 @@ $ npm run configure
``` ```
_note: add your ip address in `config/siteConfig.json` after completion_ _note: add your ip address in `config/siteConfig.json` after completion_
Build the app Build & start the app
(transpile source with babel and bundle with webpack)
```
$ npm run build
```
start the app
``` ```
$ npm run start $ npm run start
``` ```
### View in browser view in browser
visit [localhost:3000](http://localhost:3000) in your browser * visit [http://localhost:3000](http://localhost:3000) in your browser
### (optional) add custom components and update the styles (optional) add custom components and update the styles
* create custom components by creating React components in `src/views/` (further instructions coming soon) * create custom components by creating React components in `src/views/` (further instructions coming soon)
* update the css by changing the files in `public/assets/css/` (further instructions and refactor coming soon) * update the css by changing the files in `public/assets/css/` (further instructions and refactor coming soon)
### (optional) Syncing the full blockchain (optional) Syncing the full blockchain
Start the `spee.ch-sync` tool available at [billbitt/spee.ch-sync](https://github.com/billbitt/spee.ch-sync) * Start the `spee.ch-sync` tool available at [billbitt/spee.ch-sync](https://github.com/billbitt/spee.ch-sync)
* This is not necessary, but highly reccomended. It will decode the blocks of the `LBRY` blockchain and add the claims information to your database's tables
This is not necessary, but highly reccomended. It will decode the blocks of the `LBRY` blockchain and add the claims information to your database's tables
## API ## API
* _(post)_ /api/claim/publish * _(post)_ /api/claim/publish
@ -110,13 +102,67 @@ Spee.ch also runs a sync tool, which decodes blocks from the `LBRY` blockchain a
* [react](https://reactjs.org/) * [react](https://reactjs.org/)
### Architecture ### Architecture
* the `server/` folder contains all of the server code * `cli/` contains the code for the cli tool. Running the tool will create `.json` config files and place them in the `config/` folder
* `index.js` is the entry point for the server. It creates the [express app](https://expressjs.com/), requires the routes, syncs the database, and starts the server listening on the `PORT` designated in the config file. * `configure.js` is the entry point for the cli tool
* the `server/routes` folder contains all of the routes for the express app * `cli/defaults/` holds default config files
* the `server/models` folder contains all of the models which the app uses to interact with the `mysql` database. Note: this app uses the [sequelize](http://docs.sequelizejs.com/) ORM. * `cli/questions/` holds the questions that the cli tool asks to build the config files
* the `client/` folder contains all of the client code
* `client/` contains all of the client code
* The client side of spee.ch uses `React` and `Redux`
* `client/src/index.js` is the entry point for the client side js. It checks for preloaded state, creates the store, and places the `<App />` component in the document.
* `client/src/app.js` holds the `<App />` component, which contains the routes for `react-router-dom`
* `client/src/` contains all of the JSX code for the app. When the app is built, the content of this folder is transpiled into the `client/build/` folder.
* The Redux code is broken up into `actions/` `reducers/` and `selectors/`
* The React components are broken up into `containers/` (components that pull props directly from the Redux store), `components/` ('dumb' components), and `pages/`
* spee.ch also uses sagas which are in the `sagas/` folders and `channels/`
* `client/scss/` contains the css for the project
*
* `client_custom` is a folder which can be used to override the default components in `client/`
* The folder structure mimics that of the `client/` folder
* to customize spee.ch, place your own components ans scss in the `client_custom/src/` and `client_custom/scss` folders.
* `server/` contains all of the server code
* `index.js` is the entry point for the server. It creates the [express app](https://expressjs.com/), requires the routes, syncs the database, and starts the server listening on the `PORT` designated in the config files.
* `server/routes/` contains all of the routes for the express app
* `server/controllers/` contains all of the controllers for all of the routes
* `server/models/` contains all of the models which the app uses to interact with the `MySQL` database.
* Spee.ch uses the [sequelize](http://docs.sequelizejs.com/) ORM for communicating with the database.
* `tests/` holds the end-to-end tests for this project
* Spee.ch uses `mocha` with the `chai` assertion library
* unit tests are located inside the project in-line with the files being tested and are designtated with a `xxxx.test.js` file name
### Tests
* This package uses `mocha` with `chai` for testing.
* Before running tests, create a `testingConfig.js` file in `devConfig/` by copying `testingConfig.example.js`
* To run tests:
* To run all tests, including those that require LBC (like publishing), simply run `npm test`
* To run only tests that do not require LBC, run `npm run test:no-lbc`
### URL formats
Spee.ch has a few types of url formats that return different assets from the LBRY network. Below is a list of all possible urls for the content on spee.ch
* retrieve the controlling `LBRY` claim:
* https://spee.ch/`claim`
* https://spee.ch/`claim`.`ext` (serve)
* retrieve a specific `LBRY` claim:
* https://spee.ch/`claim_id`/`claim`
* https://spee.ch/`claim_id`/`claim`.`ext` (serve)
* retrieve all contents for the controlling `LBRY` channel
* https://spee.ch/`@channel`
* a specific `LBRY` channel
* https://spee.ch/`@channel`:`channel_id`
* retrieve a specific claim within the controlling `LBRY` channel
* https://spee.ch/`@channel`/`claim`
* https://spee.ch/`@channel`/`claim`.`ext` (serve)
* retrieve a specific claim within a specific `LBRY` channel
* https://spee.ch/`@channel`:`channel_id`/`claim`
* https://spee.ch/`@channel`:`channel_id`/`claim`.`ext` (serve)
### Bugs
If you find a bug or experience a problem, please report your issue here on github and find us in the lbry discord!
### Issue tags in this repo ### Issue tags in this repo
#### level 1 #### level 1
Issues that anyone with basic web development can handle; little-to-no experience with the spee.ch codebase is required. Issues that anyone with basic web development can handle; little-to-no experience with the spee.ch codebase is required.
@ -129,32 +175,3 @@ Familiarity with the spee.ch code base and how the lbry daemon functions is requ
#### level 4 #### level 4
Issues with lbry (e.g. the spee.ch wallet, lbrynet configuration, etc.) that require strong familiarity with the lbry daemon and/or network to fix. Generally these issues are best suited for the `lbry` `protocol team` but are reported in this repo because of they are part of the spee.ch implementation Issues with lbry (e.g. the spee.ch wallet, lbrynet configuration, etc.) that require strong familiarity with the lbry daemon and/or network to fix. Generally these issues are best suited for the `lbry` `protocol team` but are reported in this repo because of they are part of the spee.ch implementation
### Tests
* This package uses `mocha` with `chai` for testing.
* Before running tests, create a `testingConfig.js` file in `devConfig/` by copying `testingConfig.example.js`
* To run tests:
* To run all tests, including those that require LBC (like publishing), simply run `npm test`
* To run only tests that do not require LBC, run `npm run test:no-lbc`
### URL formats
Below is a list of all possible urls for the content on spee.ch
* controlling, free `LBRY` claim
* spee.ch/claim (show)
* spee.ch/claim.ext (serve)
* specific `LBRY` claim
* spee.ch/claim_id/claim
* spee.ch/claim_id/claim.ext
* all free contents for the controlling `LBRY` channel
* spee.ch/@channel
* a specific `LBRY` channel
* spee.ch/@channel:channel_id
* a specific claim within the controlling `LBRY` channel
* spee.ch/@channel/claim (show)
* spee.ch/@channel/claim.ext (serve)
* a specific claim within a specific `LBRY` channel
* spee.ch/@channel:channel_id/claim
* spee.ch/@channel:channel_id/claim.ext
## Bugs
If you find a bug or experience a problem, please report your issue here on github and find us in the lbry discord!

73
customize.md Normal file
View file

@ -0,0 +1,73 @@
# Configure your own spee.ch
## * Change some **css**
* Navigate to *public/assets/css* folder and open **general.css** for editing.
`$ cd public/assets/css`
`$ nano general.css`
* Add `background-color: yellow;` to the `html, body` declaration.
```css
html, body {
margin: 0;
padding: 0;
height: 100%;
word-wrap: break-word;
background-color: yellow;
}
```
*
* Restart the server, and you should see your site with a yellow background!
`$ npm run start:dev`
* Update the custom **About** Page component
* Most of the components used by [www.spee.ch](http://www.spee.ch) are taken from the spee.ch-components repo, but you can override those components by defining your own locally. As part of the [www.spee.ch](http://www.spee.ch) repo, a local custom **About** page is already included. You can edit the contents of this component in the *src/views/pages/* folder.
`$ cd src/views/pages/AboutPage`
`$ nano index.jsx`
* Change the text, or edit the **HTML** however you like.
* Restart the server, and you should see your site with an updated **About** page!
`$ npm run start:dev`
* Add a new custom Logo component.
* To create your own custom component to override the defaults, create a folder and **index.jsx** file for the component in the *src/views/components* folder.
`$ cd src/views/components`
`$ mkdir Logo`
`$ cd Logo`
`$ touch index.jsx`
`$ nano index.jsx`
* Create a simple react component in **index.jsx**.
```js
import React from 'react';
function Logo () {
return (
<p>My Logo</p>
);
};
export default Logo;
```
*
* Restart the server, and you should see your site with a new Logo in the top left corner!
`$ npm run start:dev`
**__4. Bonus:__**
* [Install PM2](http://pm2.keymetrics.io/docs/usage/quick-start/) and run your server with PM2.
* Install PM2.
`$ sudo npm i -g pm2`
* From inside your project’s folder, start your server with PM2.
`$ pm2 start server.js`
* Visit your site and see if it is running!
* Sync Your Spee.ch Instance with the full **Blockchain**
* Install **lbrycrdd**.
* Install **lbry-decoder**.
* Start **lbry-decoder**.
* Install & run [spee.ch-sync](https://github.com/billbitt/spee.ch-sync)
* Configure **spee.ch-sync**.

171
fullstart.md Normal file
View file

@ -0,0 +1,171 @@
# Create Your Own Spee.ch!
## 1. Prerequisites
### You will need the following tools installed
* Node (v8 LTS).
* Make sure you install from the **Node** website [link](https://nodejs.org/en/download/).
* npm (should come installed with Node).
* Git
* Curl
* Tmux
* Unzip
### Make sure **npm** is up-to-date.
```
$ npm update
```
### Setup a Webserver to serve **Spee.ch** from Port **3000**.
* If you are using a server provided by **lbry**, we will have **caddy** installed already.
* If you are using your own server, make sure to have a web server installed and set up to serve from port **3000**.
* Nginx instructions (recommended).
* Insert directions for certbot before installing.
* Install [Nginx](http://nginx.org/en/docs/install.html).
* Create a config file called `spee.ch` in */etc/nginx/sites-available*
* see example: [config file](https://github.com/lbryio/spee.ch/nginx_example_config).
* Rename all mentions of *sub.domain.com* with your subdomain name.
* Run this command to link the sites-available.
`$ ln -s /etc/nginx/sites-available/speech /etc/nginx/sites-enabled/speech`
* Restart Nginx.
`$ sudo service nginx restart`
* Try visiting your website.
* If Nginx is working, you should get a **502** error because there is nothing running on **3000** yet.
* If you get the default Nginx greeting, you have not properly configured it to serve from port **3000**.
* You can find logs in */var/log/nginx/* too.
* Caddy tutorial: [https://caddyserver.com/tutorial](https://caddyserver.com/tutorial)
### MySql
* Install MySql
* [Instructions](https://dev.mysql.com/doc/mysql-installation-excerpt/5.7/en)
* Create user **root**.
* Note: We are going to access **mysql** as **root** for this setup, but you may want to create a separate user in the future.
* Keep your password somewhere handy!
* Create a database called **lbry** and make sure you can use it.
`CREATE DATABASE lbry;`
`$ USE lbry;`
`$ exit; (or press ‘ctl + d’)`
* Try logging into mysql.
`$ mysql -u username -p`
* If you are using a **LBRY** server, your **password** is the one provided for **ssh**.
* Note: If it fails, try using `sudo`.
##2. Install & Run the LBRY Daemon
### Install **lbrynet**
_note: if you have a server from LBRY, lbrynet is already installed, you can skip to 2.4._
```
$ wget --quiet -O ~/latest_daemon.zip https://lbry.io/get/lbrynet.linux.zip
$ unzip -o -u "~/latest_daemon.zip"
```
### Start lbrynet
```
$ tmux
$ ./lbrynet-daemon
```
### Detach (exit) the tmux session and leave **lbrynet** running in the background.
press `ctrl` + `b` then `d` to detach
### Get LBC!
Get a list of your wallets:
```
$ ~/lbrynet-cli wallet_list
```
Send some LBC to one of the addresses from your wallet.
Check your balance again:
```
$ ~/lbrynet-cli wallet_balance
```
You should have **LBC**!
## 3. Set up Spee.ch
### Clone the spee.ch repo
```
$ git clone https://github.com/lbryio/www.spee.ch.git
```
Change directory into your site’s folder
```
$ cd <name-of-your-site>` or `$ cd www.spee.ch
```
Install dependencies
```
$ npm install
```
Run the config cli:
```
$ npm run configure
```
Check your site configs
```
$ cd config/
$ nano siteConfig.json
```
add your ip address in `config/siteConfig.json`
### Build & run
Run the below command to transpile, build, and start your server.
```
$ npm run start
```
_**Note:** if you had to use `sudo` to login to **mysql** above, you may have issues with this step._
Spee.ch should now be running !
Visit your site in the browser. Try publishing an image!
## 4. Bonus:
### Install PM2 and run your server with PM2
Install PM2
```
$ sudo npm i -g pm2
```
From inside your project’s folder, start your server with PM2.
```
$ pm2 start server.js
```
Visit your site and see if it is running!
### Sync Your Spee.ch Instance with the full **Blockchain**
Install **lbrycrdd**
Install **lbry-decoder**
Start **lbry-decoder**
Install & run [spee.ch-sync](https://github.com/billbitt/spee.ch-sync)

40
nginx_example_config Normal file
View file

@ -0,0 +1,40 @@
# Speech nginx configuration
server {
listen 80;
server_name sub.domain.com;
listen 443 ssl;
ssl_certificate /etc/letsencrypt/live/sub.domain.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/sub.domain.com/privkey.pem;
ssl_session_cache shared:SSL:20m;
ssl_session_timeout 1440m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
# Using list of ciphers from https://github.com/cloudflare/sslconfig
ssl_ciphers EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
# if letsencrypt is not working, this is probably preventing it from getting to .well-known
if ($scheme = http) {
rewrite ^ https://$server_name$request_uri? permanent;
}
# gzip_static on;
# gzip_http_version 1.0;
access_log /var/log/nginx/speech_nginx_access_log;
error_log /var/log/nginx/speech_nginx_error_log;
location / {
proxy_read_timeout 5m;
proxy_pass http://127.0.0.1:3000;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Port $server_port;
proxy_set_header Host $host;
proxy_pass_header Server;
}
}

25
test/test-embed.html
View file

@ -1,25 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<img src="https://media.giphy.com/media/vwEHGjx71HSytx5mY8/giphy-facebook_s.jpg" alt="test embed"/>
<p>no identifier, no ending</p>
<img src="https://dev1.spee.ch/typingcat" alt="no identifier, no ending"/>
<p>no identifier, yes ending</p>
<img src="https://dev1.spee.ch/typingcat.gif" alt="no identifier, yes ending"/>
<p>yes identifier, no ending</p>
<img src="https://dev1.spee.ch/8/typingcat" alt="yes identifier, no ending"/>
<p>yes identifier, yes ending</p>
<img src="https://dev1.spee.ch/8/typingcat.gif" alt="yes identifier, yes ending"/>
</body>
</html>

44
test/test-iframe.html
View file

@ -1,44 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
iframe {
width: 100%;
}
</style>
</head>
<body>
<p>i frame: weather.gov</p>
<iframe src="http://www.weather.gov/"></iframe>
<p>i frame: dev1.spee.ch video direct embed page</p>
<iframe src="https://dev1.spee.ch/video-embed/sn123ow-1/c3cadc36688ca37c7526536cfed4448e31bacf56">
iframe not supported
</iframe>
<p>i frame: dev1.spee.ch image direct asset</p>
<iframe src="https://dev1.spee.ch/asset/donut-pla2tter/d8d93f3818f4cb8398637706fb20cc57c441261f">
iframe not supported
</iframe>
<p>i frame: image from internet</p>
<iframe src="https://c.static-nike.com/a/images/t_PDP_1280_v1/f_auto/kod3bxfy7vx99bca26cb/elite-competition-8p-basketball-721MyM.jpg">
iframe not supported
</iframe>
<p>i frame: giphy </p>
<iframe src="https://media.giphy.com/media/vwEHGjx71HSytx5mY8/giphy-facebook_s.jpg">
iframe not supported
</iframe>
<p>i frame: giphy 2</p>
<iframe src="https://media.giphy.com/media/vwEHGjx71HSytx5mY8/giphy-facebook_s">
iframe not supported
</iframe>
</body>
</html>