Merge pull request #310 from halfzebra/introducing-config-file

feat: Itroduced an option of having a config for "homepage" and "proxy"

Author: halfzebra

README.md

@@ -111,7 +111,7 @@ Inspired by [create-react-app](https://github.com/facebookincubator/create-react
 
 * **One Dependency:** There is just one build dependency. It uses  Elm Platform, Webpack, and other amazing projects, but provides a cohesive curated experience on top of them.
 
-* **Zero Configuration:** There are no configuration files or command line options. Configuring both development and production builds is handled for you so you can focus on writing code.
+* **Zero Configuration:** No configuration files or command line options required to start working with Elm. Configuring both development and production builds is handled for you so you can focus on writing code.
 
 * **No Lock-In:** You can “eject” to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off.
 

config/paths.js

@@ -3,12 +3,34 @@
 const path = require('path');
 const fs = require('fs');
 const url = require('url');
+const cosmiconfig = require('cosmiconfig');
 
 // Make sure any symlinks in the project folder are resolved:
 // https://github.com/facebookincubator/create-react-app/issues/637
 const appDirectory = fs.realpathSync(process.cwd());
 const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
 
+// We look for configration in files supported by cosmiconfig by default:
+// https://github.com/davidtheclark/cosmiconfig
+const explorer = cosmiconfig('elmapp');
+const result = explorer.searchSync(appDirectory);
+const config = result ? result.config : loadElmJson();
+
+// WARNING:
+// We support config in elm.json only for legacy reasons.
+// elm-package removes the settings, so this will be removed in the future.
+function loadElmJson() {
+  try {
+    const elmJson = require(resolveApp('elm.json'));
+    if (elmJson.homepage || elmJson.proxy) {
+      return elmJson;
+    }
+  } catch (error) {
+    return {};
+  }
+  return {};
+}
+
 const envPublicUrl = process.env.PUBLIC_URL;
 
 function ensureSlash(path, needsSlash) {
@@ -21,17 +43,21 @@ function ensureSlash(path, needsSlash) {
   return path;
 }
 
-const getPublicUrl = appPackageJson =>
-  envPublicUrl || require(appPackageJson).homepage;
+const getPublicUrl = appConfig => {
+  if (envPublicUrl) {
+    return envPublicUrl;
+  }
+  return appConfig.homepage;
+};
 
 // We use `PUBLIC_URL` environment variable or "homepage" field to infer
 // "public path" at which the app is served.
 // Webpack needs to know it to put the right <script> hrefs into HTML even in
 // single-page apps that may serve index.html for nested URLs like /todos/42.
 // We can't use a relative path in HTML because we don't want to load something
 // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
-function getServedPath(appPackageJson) {
-  const publicUrl = getPublicUrl(appPackageJson);
+function getServedPath(appConfig) {
+  const publicUrl = getPublicUrl(appConfig);
   const servedUrl =
     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
   return ensureSlash(servedUrl, true);
@@ -48,6 +74,7 @@ module.exports = {
   appBuild: resolveApp('./build'),
   elmJson: resolveApp('./elm.json'),
   elm: require.resolve('elm/bin/elm'),
-  publicUrl: getPublicUrl(resolveApp('elm.json')),
-  servedPath: getServedPath(resolveApp('elm.json'))
+  publicUrl: getPublicUrl(config),
+  servedPath: getServedPath(config),
+  proxy: config.proxy
 };

package.json

@@ -30,6 +30,7 @@
     "clean-webpack-plugin": "^0.1.18",
     "cli-table": "0.3.1",
     "connect-history-api-fallback": "^1.5.0",
+    "cosmiconfig": "^5.0.6",
     "cross-spawn": "^6.0.5",
     "css-loader": "^0.28.9",
     "dotenv": "^5.0.0",

scripts/build.js

@@ -23,6 +23,7 @@ const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 const formatElmCompilerErrors = require('./utils/formatElmCompilerErrors');
+const warn = require('./utils/warn');
 
 const measureFileSizesBeforeBuild =
   FileSizeReporter.measureFileSizesBeforeBuild;
@@ -72,6 +73,7 @@ measureFileSizesBeforeBuild(paths.appBuild)
       console.log('File sizes after gzip:\n');
       printFileSizesAfterBuild(stats, previousFileSizes, paths.appBuild);
       console.log();
+      warn(paths.elmJson);
     },
     err => {
       console.error(chalk.red('Failed to compile.\n'));
@@ -83,6 +85,7 @@ measureFileSizesBeforeBuild(paths.appBuild)
 // Create the production build and print the deployment instructions.
 function build(previousFileSizes) {
   const withDebugger = process.env.ELM_DEBUGGER === 'true' ? true : false;
+  console.log();
   if (withDebugger) {
     console.log(
       `Creating a ${process.env.NODE_ENV} build with debugger enabled...`

scripts/start.js

@@ -31,6 +31,7 @@ const openBrowser = require('react-dev-utils/openBrowser');
 const createDevServerConfig = require('../config/webpackDevServer.config');
 const formatElmCompilerErrors = require('./utils/formatElmCompilerErrors');
 const paths = require('../config/paths');
+const warn = require('./utils/warn');
 
 if (fs.existsSync('elm.json') === false) {
   console.log('Please, run the build script from project root directory');
@@ -108,8 +109,10 @@ function createCompiler(webpack, config, appName, urls) {
     if (isSuccessful) {
       console.log(chalk.green('Compiled successfully!'));
     }
+
     if (isSuccessful && (isInteractive || isFirstCompile)) {
       printInstructions(appName, urls);
+      warn(paths.elmJson);
     }
     isFirstCompile = false;
 
@@ -159,8 +162,7 @@ choosePort(HOST, DEFAULT_PORT)
     // Create a webpack compiler that is configured with custom messages.
     const compiler = createCompiler(webpack, config, appName, urls);
     // Load proxy config
-    const proxySetting = require(paths.elmJson).proxy;
-    const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
+    const proxyConfig = prepareProxy(paths.proxy, paths.appPublic);
     // Serve webpack assets generated by the compiler over a web sever.
     const serverConfig = createDevServerConfig(
       proxyConfig,

scripts/utils/warn.js

@@ -0,0 +1,15 @@
+const chalk = require('chalk');
+
+module.exports = function warn(elmJsonPath) {
+  const elmJson = require(elmJsonPath);
+  if (elmJson.homepage || elmJson.proxy) {
+    console.log();
+    console.log(chalk.yellow('Warning:'));
+    console.log();
+    console.log(
+      '  Using elm.json for configuring "homebage" and "proxy" is deprecated.'
+    );
+    console.log('  This feature will be removed in the future versions.');
+    console.log();
+  }
+};

template/README.md

@@ -47,7 +47,7 @@ You can find the most recent version of this guide [here](https://github.com/hal
 * [Deployment](#deployment)
   * [Building for Relative Paths](#building-for-relative-paths)
   * [Static Server](#static-server)
-  * [Netlify](#netlify)  
+  * [Netlify](#netlify)
   * [GitHub Pages](#github-pages)
 * [IDE setup for Hot Module Replacement](#ide-setup-for-hot-module-replacement)
 
@@ -645,12 +645,12 @@ for a list of files you can use to declare environment variables.
 
 ## Setting up API Proxy
 
-To forward the API ( REST ) calls to backend server, add a proxy to the `elm.json` in the top level json object.
+To forward the API ( REST ) calls to backend server, add a proxy to the `elmapp.config.js` in the top level json object.
 
-```json
-{
+```js
+module.exports = {
     ...
-    "proxy" : "http://localhost:1313",
+    proxy: "http://localhost:1313",
     ...
 }
 ```
@@ -767,10 +767,12 @@ will affect your users' experience.
 
 By default, Create Elm App produces a build assuming your app is hosted at the server root.
 
-To override this, specify the `homepage` in your `elm.json`, for example:
+To override this, specify the `homepage` in your `elmapp.config.js`, for example:
 
 ```js
-  "homepage": "http://mywebsite.com/relativepath",
+module.exports = {
+    homepage: "http://mywebsite.com/relativepath"
+}
 ```
 
 This will let Create Elm App correctly infer the root path to use in the generated HTML file.
@@ -809,16 +811,18 @@ This step is important to make sure netlify uses the correct build command.
 
 ### GitHub Pages
 
-#### Step 1: Add `homepage` to `elm.json`
+#### Step 1: Add `homepage` to `elmapp.config.js`
 
 **The step below is important!**
 
 **If you skip it, your app will not deploy correctly.**
 
-Open your `elm.json` and add a `homepage` field:
+Open your `elmapp.config.js` and add a `homepage` field:
 
 ```js
-  "homepage": "https://myusername.github.io/my-app",
+module.exports = {
+    homepage": "https://myusername.github.io/my-app",
+}
 ```
 
 Create Elm App uses the `homepage` field to determine the root URL in the built HTML file.