add dotenv better support and proxy server config

Author: erkobridee

gatsby-config.js

@@ -1,7 +1,6 @@
 const postcssPresetEnv = require('postcss-preset-env');
 
-const dotenvParsed = require('./scripts/load-dotenv-config');
-console.log(`\n\n\n>> gatsby-config.js\n${JSON.stringify(dotenvParsed, null, 2)}\n\n\n`);
+const { activeEnv } = require('./scripts/load-dotenv-config');
 
 const gatsbyConfig = {
 	siteMetadata: {
@@ -66,4 +65,14 @@ if (pathPrefix) {
 	gatsbyConfig.plugins.push(`gatsby-plugin-offline`);
 }
 
+const isDevelopment = activeEnv === 'dev' || activeEnv === 'development';
+const proxyUrl = process.env.PROXY_URL || undefined;
+if (isDevelopment && proxyUrl) {
+	const proxyPrefix = process.env.API_PREFIX || 'api';
+	gatsbyConfig.proxy = {
+		prefix: `/${proxyPrefix}`,
+		url: proxyUrl,
+	};
+}
+
 module.exports = gatsbyConfig;

gatsby-node.js

@@ -1,13 +1,11 @@
 const path = require('path');
 const webpack = require('webpack');
 
-const dotenvParsed = require('./scripts/load-dotenv-config');
-console.log(`\n\n\n>> gatsby-node.js\n${JSON.stringify(dotenvParsed, null, 2)}\n\n\n`);
+const { dotenvParsed } = require('./scripts/load-dotenv-config');
 
 exports.onCreateWebpackConfig = ({ actions }) => {
 	// make sure to have the process.env configs from the .env file available on the /src/* files
 	const plugins = [];
-	// const { parsed: dotenvParsed } = dotenvConfig;
 	if (dotenvParsed) {
 		const webpackDefinePluginConfig = {};
 		Object.keys(dotenvParsed).forEach(key => {

package-lock.json

@@ -2,7 +2,7 @@
 	"name": "gatsby-typescript-app-starter",
 	"private": true,
 	"description": "A simple typescript application starter to get up and developing quickly with Gatsby",
-	"version": "0.2.0",
+	"version": "0.3.0",
 	"author": "Erko Bridee <erko.bridee@gmail.com>",
 	"dependencies": {
 		"abortcontroller-polyfill": "^1.3.0",
@@ -41,6 +41,7 @@
 		"eslint": "^5.16.0",
 		"eslint-config-prettier": "^5.0.0",
 		"eslint-plugin-prettier": "^3.1.0",
+		"express": "^4.17.1",
 		"fs-extra": "^8.1.0",
 		"gatsby": "^2.13.41",
 		"gatsby-image": "^2.2.7",
@@ -63,6 +64,7 @@
 		"postcss-preset-env": "^6.6.0",
 		"prettier": "^1.18.2",
 		"react-intl-translations-manager": "^5.0.3",
+		"request": "^2.88.0",
 		"svgo": "1.2.2",
 		"ts-jest": "^24.2.0",
 		"typescript": "^3.5.2",
@@ -78,6 +80,8 @@
 		"starter",
 		"sass",
 		"typescript",
+		"dotenv",
+		"proxy support",
 		"jest",
 		"unit tests",
 		"unit tests coverage"
@@ -104,7 +108,7 @@
 		"gatsby-clean": "gatsby clean",
 		"gatsby-develop": "gatsby develop -H 0.0.0.0",
 		"gatsby-build": "gatsby build --prefix-paths",
-		"gatsby-serve": "gatsby serve -H 0.0.0.0",
+		"gatsby-serve": "node scripts/proxied-http-server.js",
 		"clean:build": "node scripts/fs/rm .build/",
 		"clean:coverage": "node scripts/fs/rm coverage/",
 		"clean": "npm-run-all -p clean:coverage clean:build fonticons:clean gatsby-clean",
@@ -114,7 +118,7 @@
 		"develop": "npm-run-all -s base gatsby-develop",
 		"start": "npm run develop",
 		"build": "npm-run-all -s clean base unit-tests gatsby-build",
-		"serve": "npm-run-all -s build gatsby-serve",
+		"serve": "ACTIVE_ENV=development npm-run-all -s build gatsby-serve",
 		"gh-deploy": "gh-pages -d public",
 		"deploy": "PREFIX_PATH=true npm-run-all -s build gh-deploy"
 	},

package.json

@@ -9,14 +9,19 @@ const dotenvConfig = dotenv.config({
 	path: dotenvPath,
 });
 
+/*
 if (dotenvConfig.error) {
 	console.log(`\n\n\ndotenv file not found: '${dotenvPath}'\n\n\n`);
 }
+*/
 
 const { parsed: dotenvParsed } = dotenvConfig;
 
 if (dotenvParsed) {
 	console.log(`\n\ndotenv file '${dotenvPath}' loaded\n${JSON.stringify(dotenvParsed, null, 2)}\n\n`);
 }
 
-module.exports = dotenvParsed;
+module.exports = {
+	activeEnv,
+	dotenvParsed,
+};

scripts/load-dotenv-config.js

@@ -0,0 +1,31 @@
+/*
+    based on:
+    https://github.com/gatsbyjs/gatsby/blob/2.13.30/packages/gatsby/src/commands/develop.js#L237
+*/
+const express = require('express');
+const request = require('request');
+
+const gatsbyConfig = require('../gatsby-config');
+const { proxy } = gatsbyConfig;
+
+const app = express();
+
+app.use(express.static('public'));
+
+if (proxy) {
+	const { prefix, url } = proxy;
+	app.use(`${prefix}/*`, (req, res) => {
+		const proxiedUrl = url + req.originalUrl;
+		req.pipe(
+			request(proxiedUrl).on(`error`, err => {
+				const message = `Error when trying to proxy request "${req.originalUrl}" to "${proxiedUrl}"`;
+
+				report.error(message, err);
+				res.status(500).end();
+			})
+		).pipe(res);
+	});
+}
+
+const port = process.env.PORT || 9000;
+app.listen(port, () => console.log(`server started, listening on port ${port}`));

scripts/proxied-http-server.js

@@ -150,6 +150,8 @@ export interface IRequestOptions {
 	method?: RequestMethod;
 	host?: string;
 	api?: string;
+	/** uses the values defined on the .env file for the host and api options */
+	useDefaultPrefix?: boolean;
 	urlPath: string;
 	variables?: IDictionary;
 	parameters?: IDictionary;

src/helpers/definitions.ts

@@ -47,13 +47,14 @@ function buildResponseOutput<R extends IAPIResponse = TAPIResponse>(
  */
 export async function buildRequest<R extends IAPIResponse = IAPIResponse>(options: IRequestOptions): Promise<R> {
 	let { parameters } = options;
+	const { useDefaultPrefix = false } = options;
 	const {
 		authorization,
 		method = RequestMethod.GET,
 		contentType = RequestContentTypes.JSON,
 		protocol,
-		host,
-		api,
+		host = useDefaultPrefix ? process.env.API_HOST || undefined : undefined,
+		api = useDefaultPrefix ? process.env.API_PREFIX || undefined : undefined,
 		urlPath,
 		variables = {},
 		headers: extraHeaders = {},