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
### 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
* [link](https://nodejs.org)
@ -27,8 +28,6 @@ Clone this repo
$ git clone https://github.com/lbryio/spee.ch.git
```
### Build and Start the App
Change directory into your project
```
$ cd spee.ch
@ -45,29 +44,22 @@ $ npm run configure
```
_note: add your ip address in `config/siteConfig.json` after completion_
Build the app
(transpile source with babel and bundle with webpack)
```
$ npm run build
```
start the app
Build & start the app
```
$ npm run start
```
### View in browser
visit [localhost:3000](http://localhost:3000) in your browser
view in 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)
* update the css by changing the files in `public/assets/css/` (further instructions and refactor coming soon)
### (optional) Syncing the full blockchain
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
(optional) Syncing the full blockchain
* 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
## API
* _(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/)
### Architecture
* the `server/` folder 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 file.
* the `server/routes` folder contains all of the routes for the express app
* 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.
* the `client/` folder contains all of the client code
### Architecture
* `cli/` contains the code for the cli tool. Running the tool will create `.json` config files and place them in the `config/` folder
* `configure.js` is the entry point for the cli tool
* `cli/defaults/` holds default config files
* `cli/questions/` holds the questions that the cli tool asks to build the config files
* `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
#### level 1
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
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>