added fullstart and customize.md
This commit is contained in:
bill bittner
parent
69cd9532d4
commit
411b50d6f4
121
README.md
121
README.md
|
|
@ -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
73
customize.md
Normal 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
171
fullstart.md
Normal 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
40
nginx_example_config
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in a new issue