Merge pull request #399 from lbryio/folder-structure

Folder structure

.gitignore

@@ -1,12 +1,8 @@
 node_modules/
 .idea/
-config/lbryConfig.js
+
-config/loggerConfig.js
 config/mysqlConfig.js
 config/siteConfig.js
-devConfig/slackConfig.js
-devConfig/sequelizeCliConfig.js
-devConfig/testingConfig.js
 
 public/bundle/
 index.js

README.md

@@ -13,18 +13,41 @@ Spee.ch is a web app that reads and publishes images and videos to and from the
 	* clone this repo
 	* run `npm install`
 	* create your own config files in `/config`
-	  * copy `example.js.example` and name it `example.js`
+	  * copy `mysqlConfig.js.example`, name it `mysqlConfig.js`, and update its contents.
-	  * replace the `null` values in the config file with the appropriate values for your environment
+	  * copy `siteConfig.js.example`, name it `siteConfig.js`, and update its contents.
-	* create your own config files in `/devConfig`
-	  * copy `example.js.example` and name it `example.js`
-	  * note: you must create these files, but the default values are sufficient if you do not want to update them.
 	* build the app by running `npm run build`
+	  * for development, `npm run build-dev` will build the app and continue to listen for changes, building again when a change is made.
 	* to start the server, run `npm run start`
-* visit [localhost:3000](http://localhost:3000)
+	  * for development, `npm run start-dev` will start the server and continue to listen for changes, restarting the server again whenever a change is made. 
+	  * for production, [pm2](http://pm2.keymetrics.io/docs/usage/quick-start/) is a great tool for starting and managing node processes
+* visit [localhost:3000](http://localhost:3000) and check out your spee.ch app!
 * start spee.ch-sync (optional, recommended)
     * Note: this tool will decode blocks from the `lbry` blockchain and update the Claim and Certificate tables in mysql with all the claims from the blockchain.  This is not necessary if you only want to host and resolve content published through your version of spee.ch, but it is required if you want to retrieve and host other content from the lbry network.
     * install and run this [`speech-sync`](https://github.com/billbitt/spee.ch-sync) tool
 
+## Development & App Structure
+* the `client/` folder houses all of the `react` and `redux` code.
+  * `client.js` is the entry point for the app.  This file is the entry point for webpack to build the client bundle.
+  * `app.jsx` is the parent component that houses the rest of the app components
+  * components are located in `client/components`, `client/containers`, and `client/pages`
+      * `/components` contains the 'dumb' components that receive props (if any) from their parents
+      * `/containers` contains the 'smart' redux-connected components that receive props from the `redux-store`
+      * `/pages` contains the components which act as the main pages of the app
+  * actions are located in the `client/actions` folder
+  * reducers are located in the `client/reducers` folder
+  * sagas are located in the `client/sagas` folder 
+* the `server/` folder contains all of server code.
+  * `server.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. This file is the entry point for webpack to build the server bundle.
+  * the `/routes` folder contains all of the routes for the express app
+  * the `/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.
+* webpack
+  * During the build process, webpack creates two bundles for this project: 
+    *  (1) a client-side app bundle which will be located at `public/bundle/bundle.js`
+    *  (2) a server bundle which will be located at `index.js`
+* configuration
+  * the `config/` folder contains all of the required config files.  The project contains `.example` files which can be copied to create the necessary `.js` files
+  * the `devConfig/` folder contains optional config files.  Updating these files is not necessary.  If you update these files, make sure to add them to your `.gitignore` file so they are not included in source control.
+
 ## Tests
 * Spee.ch uses `mocha` with `chai` for testing.  
 * To run all tests that do not require LBC, run `npm test -- --grep @usesLbc --invert`

config/mysqlConfig.js.example

@@ -1,5 +1,5 @@
 module.exports = {
-  database: 'default',
+  database: 'default',  // your mysql database name
-  username: 'default',
+  username: 'default',  // your mysql username
-  password: 'default',
+  password: 'default',  // your mysql password
 };

config/siteConfig.js.example

@@ -1,28 +1,28 @@
 module.exports = {
   analytics: {
-    googleId: 'default',
+    googleId: 'default',  // optional: add a google id
   },
   assetDefaults: {
-    description: 'An asset published on Spee.ch',
+    description: 'An asset published on Spee.ch',  // optional: add a default description for assets on your site
-    thumbnail  : 'https://spee.ch/assets/img/video_thumb_default.png',
+    thumbnail  : 'https://spee.ch/assets/img/video_thumb_default.png', // optional: add a default thumbnail image for assets on your site
-    title      : 'Spee.ch',
+    title      : 'Spee.ch', // optional: add a default title for assets on your site
   },
   auth: {
-    sessionKey: 'default',
+    sessionKey: 'default',  // choose a secret session key
   },
   details: {
-    description: 'Open-source, decentralized image and video sharing.',
+    description: 'Open-source, decentralized image and video sharing.',  // add a description for your site
-    host       : 'default',
+    host       : 'https://some.cool.site',  // add the host of your site (e.g. 'https://spee.ch')
-    port       : 3000,
+    port       : 3000,  // add the port your site should listen on
-    title      : 'Spee.ch',
+    title      : 'Spee.ch',  // add a title for your site
-    twitter    : '@spee_ch',
+    twitter    : '@default',  // optional: add the twitter handle for your site
   },
   publishing: {
-    additionalClaimAddresses: [],
+    additionalClaimAddresses: [],  // optional: if you have other wallet addresses that you have used to publish from, enter them here
-    disabled                : false,
+    disabled                : false, // optional: if 'true' this will disable publishing
-    disabledMessage         : 'Please check back soon.',
+    disabledMessage         : 'Please check back soon.',  // optional: if publishing is disabled, this message will be displayed instead
-    primaryClaimAddress     : 'default',
+    primaryClaimAddress     : 'default', // required: choose an address from your lbry wallet and enter it here
-    thumbnailChannel        : 'default',
+    thumbnailChannel        : 'default',  //
     thumbnailChannelId      : 'default',
     uploadDirectory         : '/home/lbry/Uploads',
   },

devConfig/lbryConfig.js.example

@@ -1,6 +0,0 @@
-module.exports = {
-  api: {
-    apiHost: 'localhost',
-    apiPort: '5279',
-  },
-};

devConfig/loggerConfig.js.example

@@ -1,3 +0,0 @@
-module.exports = {
-  logLevel: 'debug',  // options: silly, debug, verbose, info
-};

devConfig/sequelizeCliConfig.js

@@ -1,4 +1,4 @@
-module.exports = {
+const sequelizeCliConfig = {
   development: {
     username: '',
     password: '',
@@ -21,3 +21,5 @@ module.exports = {
     dialect : 'mysql',
   },
 };
+
+module.exports = sequelizeCliConfig;

devConfig/slackConfig.js

@@ -0,0 +1,5 @@
+module.exports = {
+  slackWebHook     : '',
+  slackErrorChannel: '',
+  slackInfoChannel : null,
+};

devConfig/slackConfig.js.example

@@ -1,5 +0,0 @@
-module.exports = {
-  slackWebHook     : null,
-  slackErrorChannel: null,
-  slackInfoChannel : null,
-};

devConfig/testingConfig.js

@@ -0,0 +1,5 @@
+module.exports = {
+  testChannel        : '',
+  testChannelId      : '',
+  testChannelPassword: '',
+};

devConfig/testingConfig.js.example

@@ -1,5 +0,0 @@
-module.exports = {
-  testChannel        : null, // a channel to make test publishes in
-  testChannelId      : null, // the claim id for the test channel
-  testChannelPassword: null, // password for the test channel
-};

package.json

@@ -15,7 +15,9 @@
     "build-dev": "webpack --config webpack.dev.js",
     "build-dev-client": "webpack --config webpack.dev.client.js",
     "build-dev-server": "webpack --config webpack.dev.server.js",
-    "build": "webpack --config webpack.prod.js"
+    "build": "webpack --config webpack.prod.js",
+    "build-client": "webpack --config webpack.prod.client.js",
+    "build-server": "webpack --config webpack.prod.server.js"
   },
   "repository": {
     "type": "git",

server/server.js

@@ -6,18 +6,18 @@ const Handlebars = require('handlebars');
 const helmet = require('helmet');
 const passport = require('passport');
 const cookieSession = require('cookie-session');
-const { serializeSpeechUser, deserializeSpeechUser } = require('./server/helpers/authHelpers.js');
+const { serializeSpeechUser, deserializeSpeechUser } = require('./helpers/authHelpers.js');
 const logger = require('winston');
 
 // require configs
-const {auth: { sessionKey }, details: { port: PORT }} = require('./config/siteConfig.js');
+const {auth: { sessionKey }, details: { port: PORT }} = require('../config/siteConfig.js');
 
-const db = require('./server/models');
+const db = require('./models/index');
 
 // configure logging
-require('./server/helpers/configureLogger.js')(logger);
+require('./helpers/configureLogger.js')(logger);
 // configure slack
-require('./server/helpers/configureSlack.js')(logger);
+require('./helpers/configureSlack.js')(logger);
 
 // create an Express application
 const app = express();
@@ -38,8 +38,8 @@ app.use((req, res, next) => {  // custom logging middleware to log all incoming
 // configure passport
 passport.serializeUser(serializeSpeechUser);
 passport.deserializeUser(deserializeSpeechUser);
-const localSignupStrategy = require('./server/passport/local-signup.js');
+const localSignupStrategy = require('./passport/local-signup.js');
-const localLoginStrategy = require('./server/passport/local-login.js');
+const localLoginStrategy = require('./passport/local-login.js');
 passport.use('local-signup', localSignupStrategy);
 passport.use('local-login', localLoginStrategy);
 // initialize passport
@@ -64,11 +64,11 @@ db.sequelize
   .sync()
   .then(() => {
     // set the routes on the app
-    require('./server/routes/auth-routes.js')(app);
+    require('./routes/auth-routes.js')(app);
-    require('./server/routes/api-routes.js')(app);
+    require('./routes/api-routes.js')(app);
-    require('./server/routes/page-routes.js')(app);
+    require('./routes/page-routes.js')(app);
-    require('./server/routes/asset-routes.js')(app);
+    require('./routes/asset-routes.js')(app);
-    require('./server/routes/fallback-routes.js')(app);
+    require('./routes/fallback-routes.js')(app);
     // create server
     const http = require('http');
     return http.Server(app);

webpack.prod.client.js

@@ -0,0 +1,20 @@
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const clientBaseConfig = require('./webpack.client.common.js');
+
+const productionBuildConfig = {
+  devtool: 'source-map',
+  plugins: [
+    new UglifyJSPlugin({
+      sourceMap: true,
+    }),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production'),
+    }),
+  ],
+};
+
+module.exports = [
+  merge(clientBaseConfig, productionBuildConfig),
+];

webpack.prod.server.js

@@ -0,0 +1,20 @@
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const serverBaseConfig = require('./webpack.server.common.js');
+
+const productionBuildConfig = {
+  devtool: 'source-map',
+  plugins: [
+    new UglifyJSPlugin({
+      sourceMap: true,
+    }),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production'),
+    }),
+  ],
+};
+
+module.exports = [
+  merge(serverBaseConfig, productionBuildConfig),
+];

webpack.server.common.js

@@ -8,7 +8,7 @@ module.exports = {
     __dirname: false,
   },
   externals: [nodeExternals()],
-  entry    : ['babel-polyfill', 'whatwg-fetch', './server.js'],
+  entry    : ['babel-polyfill', 'whatwg-fetch', './server/server.js'],
   output   : {
     path         : Path.join(__dirname, '/'),
     publicPath   : '/',