Permalink
Browse files

chore(*): setup build metadatas in index.html

Take a look at the view source of the generated index.html

```
npm install --save-dev moment git-rev-sync
```
  • Loading branch information...
topheman committed May 22, 2018
1 parent b2a4026 commit 74d81b24456ec2d6d5ff786b64fc0bfbfe66b195
Showing with 176 additions and 4 deletions.
  1. +26 −0 bin/expand-metadatas.js
  2. +105 −0 common.js
  3. +37 −0 package-lock.json
  4. +5 −3 package.json
  5. +3 −1 public/index.html
@@ -0,0 +1,26 @@
/**
* This script is meant to be required by react-scripts to inject infos as env vars on the fly.
* It's an alternative to the DefinePlugin of webpack for create-react-app without ejecting.
*
* That way the vars you expose on process.env bellow will accessible as create-react-app env vars.
*
* Limitations:
* - They can only be strings.
* - This script is required before any env vars are set by react-scripts
* -> you can't rely on NODE_ENV for example
*
* Example usage: "start": "react-scripts --require ./bin/expand-metadatas.js start"
*/
const { getBanner, getInfos } = require("../common");
const isMock =
process.env.REACT_APP_NPM_REGISTRY_API_MOCKS_ENABLED === "true" ||
process.env.REACT_APP_NPM_API_MOCKS_ENABLED === "true";
process.env.REACT_APP_METADATAS_BANNER_HTML = getBanner(
"formatted",
isMock ? ["This is a mocked version", ""] : []
);
process.env.REACT_APP_METADATAS_VERSION = getInfos().pkg.version;
105 common.js
@@ -0,0 +1,105 @@
/* eslint-disable import/no-extraneous-dependencies,no-underscore-dangle */
/**
* Inspired by https://github.com/topheman/webpack-babel-starter
*/
function getRootDir() {
return __dirname;
}
function projectIsGitManaged() {
const fs = require("fs");
const path = require("path");
try {
// Query the entry
const stats = fs.lstatSync(path.join(__dirname, ".git"));
// Is it a directory?
if (stats.isDirectory()) {
return true;
}
return false;
} catch (e) {
return false;
}
}
function _getUrlToCommit(pkg, gitRevisionLong) {
let urlToCommit = null;
// if no repository return null
if (typeof pkg.repository === "undefined") {
return urlToCommit;
}
// retrieve and reformat repo url from package.json
if (typeof pkg.repository === "string") {
urlToCommit = pkg.repository;
} else if (typeof pkg.repository.url === "string") {
urlToCommit = pkg.repository.url;
}
// check that there is a git repo specified in package.json & it is a github one
if (urlToCommit !== null && /^https:\/\/github.com/.test(urlToCommit)) {
urlToCommit = urlToCommit.replace(/.git$/, "/tree/" + gitRevisionLong); // remove the .git at the end
}
return urlToCommit;
}
function getInfos() {
const gitActive = projectIsGitManaged();
const gitRev = require("git-rev-sync");
const moment = require("moment");
const pkg = require("./package.json");
const infos = {
pkg,
today: moment(new Date()).format(),
year: new Date().toISOString().substr(0, 4),
gitRevisionShort: gitActive ? gitRev.short() : null,
gitRevisionLong: gitActive ? gitRev.long() : null,
author:
pkg.author && pkg.author.name ? pkg.author.name : pkg.author || null,
urlToCommit: null
};
infos.urlToCommit = gitActive
? _getUrlToCommit(pkg, infos.gitRevisionLong)
: null;
return infos;
}
/**
* Called in default mode by webpack (will format it correctly in comments)
* Called in formatted mode by gulp (for html comments)
* @param {String} mode default/formatted
* @param {Array} moreInfos
* @returns {String}
*/
function getBanner(mode, moreInfos = []) {
const infos = getInfos();
const compiled = [
"",
"",
infos.pkg.name,
"",
infos.pkg.description,
"",
`@version v${infos.pkg.version} - ${infos.today}`,
(infos.gitRevisionShort !== null
? `@revision #${infos.gitRevisionShort}`
: "") + (infos.urlToCommit !== null ? ` - ${infos.urlToCommit}` : ""),
infos.author !== null ? `@author ${infos.author}` : "",
`@copyright ${infos.year}(c)` +
(infos.author !== null ? ` ${infos.author}` : ""),
infos.pkg.license ? `@license ${infos.pkg.license}` : "",
""
]
.concat(moreInfos)
.join(mode === "formatted" ? "\n * " : "\n");
return compiled;
}
function getBannerHtml() {
return "<!--!\n * \n * " + getBanner("formatted") + "\n-->\n";
}
module.exports.getRootDir = getRootDir;
module.exports.getInfos = getInfos;
module.exports.getBanner = getBanner;
module.exports.getBannerHtml = getBannerHtml;

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -26,11 +26,11 @@
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"start": "react-scripts --require ./bin/expand-metadatas.js start",
"build": "react-scripts --require ./bin/expand-metadatas.js build",
"test": "npm run test:unit",
"test:unit": "cross-env CI=true npm run test:unit:watch",
"test:unit:watch": "react-scripts test --env=jsdom",
"test:unit:watch": "react-scripts --require ./bin/expand-metadatas.js test --env=jsdom",
"test:precommit": "npm test",
"eject": "react-scripts eject",
"lint": "npx eslint .",
@@ -44,8 +44,10 @@
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-cypress": "^2.0.1",
"eslint-plugin-prettier": "^2.6.0",
"git-rev-sync": "^1.12.0",
"husky": "^0.14.3",
"lint-staged": "^7.1.2",
"moment": "^2.22.1",
"prettier": "1.12.1",
"serve": "^6.5.8"
},
@@ -40,4 +40,6 @@
-->
</body>
</html>
</html>
<!--!%REACT_APP_METADATAS_BANNER_HTML%
-->

0 comments on commit 74d81b2

Please sign in to comment.