RFC: User Config file integration

README.md

@@ -8,7 +8,7 @@ A modern and performant static site generator supporting Web Component based dev
 ## Getting Started
 By default, Greenwood will generate a site for you in _public/_.
 ```shell
-$ greenwood
+$ greenwood build
 ```
 
 Fun!  But naturally you'll want to make your own pages.  So create a folder called _src/pages/_ and create a page called _index.md_.
@@ -77,6 +77,14 @@ class index extends LitElement {
 customElements.define('home-page', index);
 ```
 
+### Development Mode
+
+You can launch a development server with live-reload by running:
+
+```bash
+$ greenwood develop
+```
+
 ## Advanced Markdown
 
 You can also render custom html such as a custom style or even a component within your markdown page using `imports` in your front-matter variables at top, as well as utilizing the `render` code block e.g.
@@ -102,6 +110,40 @@ This is an example page built by Greenwood.  Make your own in src/pages!
 ## API
 Here are some of the features and capabiliites of Greenwood.
 
+### Configure
+
+Custom greenwood configurations can be added to a `greenwood.config.js` file in your root directory. For example, you may want to change the `src` folder to something else such as `www`.
+
+```js
+{
+    "source": "www"
+}
+
+```
+
+#### PublicPath
+
+If you're hosting at yourdomain.com/mysite/ as the root to your site, you can change the public path by adding it within a `greenwood.config.js`:
+
+```js
+{
+    "publicPath": "/mysite/",
+}
+```
+
+#### Dev Server
+
+You can adjust your dev server host and port, if you prefer to use something other than the default by adding it with a `greenwood.config.js`
+
+```js
+{
+    "devServer": {
+      "port": 1984,
+      "host": "localhost"
+    }
+}
+```
+
 ### Global CSS / Assets
 > TODO 
 > https://github.com/ProjectEvergreen/greenwood/issues/7

packages/cli/config/webpack.config.common.js

@@ -25,7 +25,7 @@ const mapUserWorkspaceDirectory = (userPath) => {
   );
 };
 
-module.exports = (context) => {
+module.exports = (context, config) => {
   // dynamically map all the user's workspace directories for resolution by webpack
   // this essentially helps us keep watch over changes from the user, and greenwood's build pipeline
   const mappedUserDirectoriesForWebpack = getUserWorkspaceDirectories(context.userWorkspace).map(mapUserWorkspaceDirectory);
@@ -39,7 +39,7 @@ module.exports = (context) => {
     output: {
       path: context.publicDir,
       filename: '[name].[hash].bundle.js',
-      publicPath: '/'
+      publicPath: config.publicPath
     },
 
     module: {

packages/cli/config/webpack.config.develop.js

@@ -6,8 +6,6 @@ const generateCompilation = require('../lib/compile');
 const webpackMerge = require('webpack-merge');
 const commonConfig = require(path.join(__dirname, '..', './config/webpack.config.common.js'));
 
-const host = 'localhost';
-const port = 1981;
 let isRebuilding = false;
 
 const rebuild = async() => {
@@ -24,9 +22,10 @@ const rebuild = async() => {
   }
 };
 
-module.exports = (context) => {
-  const configWithContext = commonConfig(context);
-  const publicPath = configWithContext.output.publicPath;
+module.exports = ({ context, config }) => {
+  const configWithContext = commonConfig(context, config);
+  const { publicPath, devServer } = config;
+  const { host, port } = devServer;
 
   return webpackMerge(configWithContext, {
 

packages/cli/config/webpack.config.prod.js

@@ -3,8 +3,8 @@ const path = require('path');
 const webpackMerge = require('webpack-merge');
 const commonConfig = require(path.join(__dirname, '..', './config/webpack.config.common.js'));
 
-module.exports = (context) => {
-  const configWithContext = commonConfig(context);
+module.exports = ({ context, config }) => {
+  const configWithContext = commonConfig(context, config);
 
   return webpackMerge(configWithContext, {
 
@@ -18,7 +18,7 @@ module.exports = (context) => {
       new HtmlWebpackPlugin({
         filename: '404.html',
         template: path.join(context.scratchDir, '404.html'),
-        publicPath: configWithContext.output.publicPath
+        publicPath: config.publicPath
       })
     ]
 

packages/cli/lib/compile.js

@@ -1,29 +1,30 @@
 require('colors');
+const initConfig = require('./config');
 const initContext = require('./init');
 const generateGraph = require('./graph');
 const generateScaffolding = require('./scaffold');
 
-// TODO would like to move graph and scaffold to the top more maybe?
 module.exports = generateCompilation = () => {
   return new Promise(async (resolve, reject) => {
     try {
 
       let compilation = {
         graph: [],
-        context: {}
+        context: {},
+        config: {}
       };      
 
+      // read from defaults/config file
+      console.log('Reading project config');
+      compilation.config = await initConfig();
+
       // determine whether to use default template or user detected workspace
       console.log('Initializing project workspace contexts');
-      const context = await initContext(compilation);
-
-      compilation.context = context;
+      compilation.context = await initContext(compilation);
 
       // generate a graph of all pages / components to build
       console.log('Generating graph of workspace files...');
-      const graph = await generateGraph(compilation);
-
-      compilation.graph = graph;
+      compilation.graph = await generateGraph(compilation);
 
       // generate scaffolding
       console.log('Scaffolding out project files...');

packages/cli/lib/config.js

@@ -0,0 +1,33 @@
+const fs = require('fs');
+const path = require('path');
+
+let config = {
+  source: path.join(process.cwd(), 'src'),
+  devServer: {
+    port: 1984,
+    host: 'localhost'
+  },
+  publicPath: '/',
+  // TODO add global meta data see issue #5
+  // https://github.com/ProjectEvergreen/greenwood/issues/5
+  meta: { 
+    title: '',
+    description: '',
+    author: '',
+    domain: ''
+  }
+};
+
+module.exports = readAndMergeConfig = async() => {
+  if (fs.existsSync(path.join(process.cwd(), 'greenwood.config.json'))) {
+    const userCfgFile = require(path.join(process.cwd(), 'greenwood.config.json'));
+
+    // prepend paths with current directory
+    if (userCfgFile.source) {
+      userCfgFile.source = path.join(process.cwd(), userCfgFile.source);
+    }
+
+    config = { ...config, ...userCfgFile };
+  }
+  return config;
+};

packages/cli/lib/init.js

@@ -2,26 +2,26 @@ const fs = require('fs');
 const path = require('path');
 const greenwoodWorkspace = path.join(__dirname, '..');
 const defaultTemplateDir = path.join(greenwoodWorkspace, 'templates/');
-const defaultSrc = path.join(process.cwd(), 'src');
 
-const userWorkspace = fs.existsSync(defaultSrc)
-  ? defaultSrc
-  : defaultTemplateDir;
-
-const pagesDir = fs.existsSync(path.join(userWorkspace, 'pages'))
-  ? path.join(userWorkspace, 'pages/')
-  : defaultTemplateDir;
-
-const templatesDir = fs.existsSync(path.join(userWorkspace, 'templates'))
-  ? path.join(userWorkspace, 'templates/')
-  : defaultTemplateDir;
-
-module.exports = initContexts = async() => {
+module.exports = initContexts = async({ config }) => {
 
   return new Promise((resolve, reject) => {
 
     try {
-
+      const defaultSrc = config.source;
+
+      const userWorkspace = fs.existsSync(defaultSrc)
+        ? defaultSrc
+        : defaultTemplateDir;
+
+      const pagesDir = fs.existsSync(path.join(userWorkspace, 'pages'))
+        ? path.join(userWorkspace, 'pages/')
+        : defaultTemplateDir;
+
+      const templatesDir = fs.existsSync(path.join(userWorkspace, 'templates'))
+        ? path.join(userWorkspace, 'templates/')
+        : defaultTemplateDir;
+
       const context = {
         userWorkspace,
         pagesDir,

packages/cli/tasks/build.js

@@ -18,8 +18,8 @@ module.exports = runProductionBuild = async(compilation) => {
 };
 
 // eslint-disable-next-line no-unused-vars
-const runWebpack = async ({ context }) => {
-  const webpackConfig = require(path.join(__dirname, '..', './config/webpack.config.prod.js'))(context);
+const runWebpack = async (compilation) => {
+  const webpackConfig = require(path.join(__dirname, '..', './config/webpack.config.prod.js'))(compilation);
 
   return new Promise(async (resolve, reject) => {
 

packages/cli/tasks/develop.js

@@ -2,11 +2,11 @@ const path = require('path');
 const webpack = require('webpack');
 const WebpackDevServer = require('webpack-dev-server');
 
-module.exports = runDevServer = async ({ context }) => {
+module.exports = runDevServer = async (compilation) => {
   return new Promise(async (resolve, reject) => {
 
     try {
-      const webpackConfig = require(path.join(__dirname, '..', './config/webpack.config.develop.js'))(context);
+      const webpackConfig = require(path.join(__dirname, '..', './config/webpack.config.develop.js'))(compilation);
       const devServerConfig = webpackConfig.devServer;
 
       let compiler = webpack(webpackConfig);

test/cli.spec.js

@@ -160,4 +160,67 @@ describe('building greenwood with error handling for app and page templates', ()
     await fs.remove(CONTEXT.scratchDir);
   });
 
+});
+
+describe('building greenwood with user provided config file', () => {
+  before(async () => {
+    setup = new TestSetup();
+    CONTEXT = await setup.init();
+
+    // read user config file and copy it to app root
+    const userCfgFile = require(CONTEXT.userCfgPath);
+
+    await fs.copy(CONTEXT.userCfgPath, CONTEXT.userCfgRootPath);
+
+    // set new user source based on config file
+    CONTEXT.userSrc = path.join(__dirname, '..', userCfgFile.source);
+
+    // copy test app to configured source
+    await fs.copy(CONTEXT.testApp, CONTEXT.userSrc);
+    await setup.run(['./packages/cli/index.js', 'build']);
+
+    blogPageHtmlPath = path.join(CONTEXT.publicDir, 'blog', '20190326', 'index.html'); 
+  });
+
+  it('should output one JS bundle', async() => {
+    expect(await glob.promise(path.join(CONTEXT.publicDir, './**/index.*.bundle.js'))).to.have.lengthOf(1);
+  });
+
+  it('should contain a nested blog page directory', () => {
+    expect(fs.existsSync(path.join(CONTEXT.publicDir, 'blog', '20190326'))).to.be.true;
+  });
+
+  describe('nested generated blog page directory', () => {
+    const defaultHeading = 'Blog Page';
+    const defaultBody = 'This is the blog page built by Greenwood.';
+    let dom;
+
+    beforeEach(async() => {
+      dom = await JSDOM.fromFile(blogPageHtmlPath);
+    });
+
+    it('should contain a nested blog page with an index html file', () => {
+      expect(fs.existsSync(blogPageHtmlPath)).to.be.true;
+    });
+
+    it('should have the expected heading text within the blog page in the blog directory', async() => {
+      const heading = dom.window.document.querySelector('h3.wc-md-blog').textContent;
+
+      expect(heading).to.equal(defaultHeading);
+    });
+
+    it('should have the expected paragraph text within the blog page in the blog directory', async() => {
+      let paragraph = dom.window.document.querySelector('p.wc-md-blog').textContent;
+
+      expect(paragraph).to.equal(defaultBody);
+    });
+  });
+
+  after(async() => {
+    await fs.remove(CONTEXT.userSrc);
+    await fs.remove(CONTEXT.userCfgRootPath);
+    await fs.remove(CONTEXT.publicDir);
+    await fs.remove(CONTEXT.scratchDir);
+  });
+
 });

test/fixtures/greenwood.config.json

@@ -0,0 +1,9 @@
+{
+    "source": "src3",
+    "publicPath": "/",
+    "devServer": {
+        "port": 1984,
+        "host": "localhost"
+    },
+    "meta": {}
+}

test/setup.js

@@ -11,12 +11,14 @@ module.exports = class Setup {
   init() {
     return new Promise(async(resolve, reject) => {
       try {
-        const ctx = await initContext();
+        const ctx = await initContext({ config: {} });
         const context = { 
           ...ctx,
           userSrc: path.join(__dirname, '..', 'src'), // static src
           userTemplates: path.join(__dirname, '..', 'src', 'templates'), // static src/templates for testing empty templates dir, redundant in #38
-          testApp: path.join(__dirname, 'fixtures', 'mock-app', 'src')
+          testApp: path.join(__dirname, 'fixtures', 'mock-app', 'src'),
+          userCfgPath: path.join(__dirname, 'fixtures', 'greenwood.config.json'),
+          userCfgRootPath: path.join(__dirname, '..', 'greenwood.config.json')
         };
 
         resolve(context);