Skip to content

Commit 96eaccc

Browse files
ambrauerambrauer
authored
[RAV] Bring environment variable support to config generation (#911)
* Complete migration to Apollo Client 3 (remove usage of apollo-client and react-apollo) * Add environment variable support to RAV config generation * remove console.log
1 parent 1d3d43c commit 96eaccc

File tree

10 files changed

+62
-72
lines changed

10 files changed

+62
-72
lines changed

‎packages/create-sitecore-jss/src/templates/angular/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@
100100
"chalk": "~4.1.0",
101101
"chokidar": "^3.5.2",
102102
"codelyzer": "~6.0.1",
103+
"constant-case": "^3.0.4",
103104
"cookie-parser": "~1.4.5",
104105
"cross-env": "~7.0.3",
105106
"del-cli": "^3.0.1",

‎packages/create-sitecore-jss/src/templates/angular/scripts/generate-config.ts

+17-22
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as fs from 'fs';
22
import * as path from 'path';
3+
import { constantCase } from 'constant-case';
34
const packageConfig = require('../package.json');
45

56
/**
@@ -38,18 +39,28 @@ export function generateConfig(configOverrides?: { [key: string]: unknown }, out
3839

3940
// The GraphQL endpoint is an example of making a _computed_ config setting
4041
// based on other config settings.
41-
addGraphQLConfig(config);
42+
const computedConfig: { [key: string]: string } = {};
43+
computedConfig.graphQLEndpoint = '`${config.sitecoreApiHost}${config.graphQLEndpointPath}`';
4244

43-
const configText = `
45+
let configText = `/* eslint-disable */
4446
// Do not edit this file, it is auto-generated at build time!
4547
// See scripts/bootstrap.ts to modify the generation of this file.
46-
export const environment = ${JSON.stringify(config, null, 2)};
47-
`;
48+
const config = {};\n`;
49+
50+
// Set base configuration values, allowing override with environment variables
51+
Object.keys(config).forEach((prop) => {
52+
configText += `config.${prop} = process.env.${constantCase(prop)} || "${config[prop]}",\n`;
53+
});
54+
// Set computed values, allowing override with environment variables
55+
Object.keys(computedConfig).forEach((prop) => {
56+
configText += `config.${prop} = process.env.${constantCase(prop)} || ${
57+
computedConfig[prop]
58+
};\n`;
59+
});
60+
configText += `module.exports = config;`;
4861

4962
const configPath = path.resolve(outputPath);
50-
5163
console.log(`Writing runtime config to ${configPath}`);
52-
5364
fs.writeFileSync(configPath, configText, { encoding: 'utf8' });
5465
}
5566

@@ -82,19 +93,3 @@ function transformPackageConfig() {
8293
graphQLEndpointPath: packageAny.config.graphQLEndpointPath || null,
8394
};
8495
}
85-
86-
/**
87-
* Adds the GraphQL endpoint URL to the config object, and ensures that components needed to calculate it are valid
88-
*/
89-
function addGraphQLConfig(baseConfig: { [key: string]: unknown }) {
90-
if (!baseConfig.graphQLEndpointPath || typeof baseConfig.sitecoreApiHost === 'undefined') {
91-
console.error(
92-
'The `graphQLEndpointPath` and/or `layoutServiceHost` configurations were not defined. You may need to run `jss setup`.'
93-
);
94-
process.exit(1);
95-
}
96-
97-
// eslint-disable-next-line no-param-reassign
98-
baseConfig.graphQLEndpoint = `${baseConfig.sitecoreApiHost}${
99-
baseConfig.graphQLEndpointPath}`;
100-
}

‎packages/create-sitecore-jss/src/templates/react/package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@
3333
"dependencies": {
3434
"@apollo/client": "^3.5.6",
3535
"@sitecore-jss/sitecore-jss-react": "^20.0.0-canary",
36-
"apollo-client": "^2.6.10",
3736
"axios": "^0.21.1",
3837
"bootstrap": "^4.3.1",
3938
"cross-fetch": "^3.0.6",
@@ -43,7 +42,6 @@
4342
"i18next": "^19.9.2",
4443
"js-sha256": "^0.9.0",
4544
"react": "^17.0.2",
46-
"react-apollo": "~3.1.1",
4745
"react-app-polyfill": "^1.0.6",
4846
"react-dom": "^17.0.2",
4947
"react-helmet": "~5.2.1",
@@ -64,6 +62,7 @@
6462
"babel-preset-react-app": "~9.0.2",
6563
"chalk": "~2.4.2",
6664
"chokidar": "~3.1.1",
65+
"constant-case": "^3.0.4",
6766
"cross-env": "~6.0.0",
6867
"cross-spawn": "^7.0.3",
6968
"del-cli": "^3.0.1",

‎packages/create-sitecore-jss/src/templates/react/scripts/generate-config.js

+18-21
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
const fs = require('fs');
22
const path = require('path');
3+
const { constantCase } = require('constant-case');
34
const packageConfig = require('../package.json');
45

56
/* eslint-disable no-console */
@@ -33,17 +34,28 @@ module.exports = function generateConfig(configOverrides) {
3334

3435
// The GraphQL endpoint is an example of making a _computed_ config setting
3536
// based on other config settings.
36-
addGraphQLConfig(config);
37+
const computedConfig = {};
38+
computedConfig.graphQLEndpoint = '`${config.sitecoreApiHost}${config.graphQLEndpointPath}`';
3739

38-
const configText = `/* eslint-disable */
40+
let configText = `/* eslint-disable */
3941
// Do not edit this file, it is auto-generated at build time!
40-
// See scripts/bootstrap.js to modify the generation of this file.
41-
module.exports = ${JSON.stringify(config, null, 2)};`;
42+
// See scripts/bootstrap.ts to modify the generation of this file.
43+
const config = {};\n`;
44+
45+
// Set base configuration values, allowing override with environment variables
46+
Object.keys(config).forEach((prop) => {
47+
configText += `config.${prop} = process.env.${constantCase(prop)} || "${config[prop]}",\n`;
48+
});
49+
// Set computed values, allowing override with environment variables
50+
Object.keys(computedConfig).forEach((prop) => {
51+
configText += `config.${prop} = process.env.${constantCase(prop)} || ${
52+
computedConfig[prop]
53+
};\n`;
54+
});
55+
configText += 'module.exports = config;';
4256

4357
const configPath = path.resolve('src/temp/config.js');
44-
4558
console.log(`Writing runtime config to ${configPath}`);
46-
4759
fs.writeFileSync(configPath, configText, { encoding: 'utf8' });
4860
};
4961

@@ -75,18 +87,3 @@ function transformPackageConfig() {
7587
graphQLEndpointPath: packageConfig.config.graphQLEndpointPath || null,
7688
};
7789
}
78-
79-
/**
80-
* Adds the GraphQL endpoint URL to the config object, and ensures that components needed to calculate it are valid
81-
*/
82-
function addGraphQLConfig(baseConfig) {
83-
if (!baseConfig.graphQLEndpointPath || typeof baseConfig.sitecoreApiHost === 'undefined') {
84-
console.error(
85-
'The `graphQLEndpointPath` and/or `layoutServiceHost` configurations were not defined. You may need to run `jss setup`.'
86-
);
87-
process.exit(1);
88-
}
89-
90-
// eslint-disable-next-line no-param-reassign
91-
baseConfig.graphQLEndpoint = `${baseConfig.sitecoreApiHost}${baseConfig.graphQLEndpointPath}`;
92-
}

‎packages/create-sitecore-jss/src/templates/react/server/server.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import serializeJavascript from 'serialize-javascript';
22
import React from 'react';
33
import { StaticRouter, matchPath } from 'react-router-dom';
4-
import { renderToStringWithData } from 'react-apollo';
4+
import { renderToStringWithData } from '@apollo/client/react/ssr';
55
import Helmet from 'react-helmet';
66
import axios from 'axios';
77
import http from 'http';

‎packages/create-sitecore-jss/src/templates/react/src/AppRoot.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { SitecoreContext } from '@sitecore-jss/sitecore-jss-react';
33
import { Route, Switch } from 'react-router-dom';
4-
import { ApolloProvider } from 'react-apollo';
4+
import { ApolloProvider } from '@apollo/client';
55
import componentFactory from './temp/componentFactory';
66
import RouteHandler from './RouteHandler';
77

‎packages/create-sitecore-jss/src/templates/react/src/components/GraphQL-ConnectedDemo/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,6 @@ const GraphQLConnectedDemo = (props) => {
8080
);
8181
};
8282

83-
// compose() (from react-apollo) can be used when you need more than one GraphQL query
83+
// compose() (from @apollo/client/react/hoc) can be used when you need more than one GraphQL query
8484
// for a single query, e.g. `compose(GraphQLData(q1), GraphQLData(q2))(component)`
8585
export default GraphQLData(ConnectedDemoQuery, { name: 'connectedQuery' })(GraphQLConnectedDemo);

‎packages/create-sitecore-jss/src/templates/react/src/lib/GraphQLData.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import React from 'react';
2-
import { graphql } from 'react-apollo';
2+
import { graphql } from '@apollo/client/react/hoc';
33
import { withSitecoreContext, resetEditorChromes } from '@sitecore-jss/sitecore-jss-react';
44

55
/**
66
* Higher order component that abstracts common JSS + Apollo integration needs.
77
*
8-
* This component works similar to react-apollo's graphql() HOC, but:
8+
* This component works similar to @apollo/client's graphql() HOC, but:
99
* * Automatically injects $contextItem and $datasource GraphQL variable values, if the GraphQL declares usage of them
1010
* * Automatically disables execution of subscription queries when doing SSR
1111
* * Passes through any other props to its wrapped component
1212
*
1313
* @param {*} query The GraphQL AST to execute (should go through graphql-tag, no strings)
14-
* @param {*} configuration Values passed in are shipped to react-apollo configuration (https://www.apollographql.com/docs/react/basics/setup.html#graphql-config)
14+
* @param {*} configuration Values passed in are shipped to @apollo/client configuration (https://www.apollographql.com/docs/react/basics/setup.html#graphql-config)
1515
*/
1616
function GraphQLData(query, configuration = {}) {
1717
return function wrapComponent(Component) {

‎packages/create-sitecore-jss/src/templates/vue/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@
7676
"@vue/eslint-config-prettier": "~5.0.0",
7777
"babel-eslint": "~10.0.3",
7878
"chokidar": "~3.1.1",
79+
"constant-case": "^3.0.4",
7980
"cross-env": "~6.0.0",
8081
"eslint": "^7.4.0",
8182
"eslint-plugin-prettier": "^3.1.3",

‎packages/create-sitecore-jss/src/templates/vue/scripts/generate-config.js

+18-21
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
const fs = require('fs');
22
const path = require('path');
3+
const { constantCase } = require('constant-case');
34
const packageConfig = require('../package.json');
45

56
/* eslint-disable no-console */
@@ -33,17 +34,28 @@ module.exports = function generateConfig(configOverrides) {
3334

3435
// The GraphQL endpoint is an example of making a _computed_ config setting
3536
// based on other config settings.
36-
addGraphQLConfig(config);
37+
const computedConfig = {};
38+
computedConfig.graphQLEndpoint = '`${config.sitecoreApiHost}${config.graphQLEndpointPath}`';
3739

38-
const configText = `/* eslint-disable */
40+
let configText = `/* eslint-disable */
3941
// Do not edit this file, it is auto-generated at build time!
40-
// See scripts/bootstrap.js to modify the generation of this file.
41-
export default ${JSON.stringify(config, null, 2)};`;
42+
// See scripts/bootstrap.ts to modify the generation of this file.
43+
const config = {};\n`;
44+
45+
// Set base configuration values, allowing override with environment variables
46+
Object.keys(config).forEach((prop) => {
47+
configText += `config.${prop} = process.env.${constantCase(prop)} || "${config[prop]}",\n`;
48+
});
49+
// Set computed values, allowing override with environment variables
50+
Object.keys(computedConfig).forEach((prop) => {
51+
configText += `config.${prop} = process.env.${constantCase(prop)} || ${
52+
computedConfig[prop]
53+
};\n`;
54+
});
55+
configText += 'module.exports = config;';
4256

4357
const configPath = path.resolve('src/temp/config.js');
44-
4558
console.log(`Writing runtime config to ${configPath}`);
46-
4759
fs.writeFileSync(configPath, configText, { encoding: 'utf8' });
4860
};
4961

@@ -75,18 +87,3 @@ function transformPackageConfig() {
7587
graphQLEndpointPath: packageConfig.config.graphQLEndpointPath || null,
7688
};
7789
}
78-
79-
/**
80-
* Adds the GraphQL endpoint URL to the config object, and ensures that components needed to calculate it are valid
81-
*/
82-
function addGraphQLConfig(baseConfig) {
83-
if (!baseConfig.graphQLEndpointPath || typeof baseConfig.sitecoreApiHost === 'undefined') {
84-
console.error(
85-
'The `graphQLEndpointPath` and/or `layoutServiceHost` configurations were not defined. You may need to run `jss setup`.'
86-
);
87-
process.exit(1);
88-
}
89-
90-
// eslint-disable-next-line no-param-reassign
91-
baseConfig.graphQLEndpoint = `${baseConfig.sitecoreApiHost}${baseConfig.graphQLEndpointPath}`;
92-
}

0 commit comments

Comments
 (0)