Use API server passed during SPA build time

XSnippet is an Open Source project that can be deployed anywhere anytime
by anyone. Therefore, we must be prepared and provide facilities to pass
non-default XSnippet API server URI. Since we do not support runtime
configuration yet, let's pass it via environment variables during SPA
build time.

Author: ikalnytskyi

src/actions/index.js

@@ -1,4 +1,5 @@
 import parseLinkHeader from 'parse-link-header';
+import * as misc from '../misc';
 
 export const setRecentSnippets = snippets => ({
   type: 'SET_RECENT_SNIPPETS',
@@ -14,7 +15,7 @@ export const fetchRecentSnippets = marker => (dispatch) => {
   let qs = '';
   if (marker) { qs = `&marker=${marker}`; }
 
-  return fetch(`//api.xsnippet.org/snippets?limit=20${qs}`)
+  return fetch(misc.getApiUri(`/snippets?limit=20${qs}`))
     .then((response) => {
       const links = parseLinkHeader(response.headers.get('Link'));
 
@@ -30,7 +31,7 @@ export const setSnippet = snippet => ({
 });
 
 export const fetchSnippet = id => dispatch => (
-  fetch(`//api.xsnippet.org/snippets/${id}`)
+  fetch(misc.getApiUri(`/snippets/${id}`))
     .then(response => response.json())
     .then(json => dispatch(setSnippet(json)))
 );
@@ -41,13 +42,13 @@ export const setSyntaxes = syntaxes => ({
 });
 
 export const fetchSyntaxes = dispatch => (
-  fetch('//api.xsnippet.org/syntaxes')
+  fetch(misc.getApiUri('/syntaxes'))
     .then(response => response.json())
     .then(json => dispatch(setSyntaxes(json)))
 );
 
 export const postSnippet = (snippet, onSuccess) => dispatch => (
-  fetch('//api.xsnippet.org/snippets', {
+  fetch(misc.getApiUri('/snippets'), {
     method: 'POST',
     headers: {
       'Accept': 'application/json',

src/components/RecentSnippetItem.jsx

@@ -3,14 +3,15 @@ import { Link } from 'react-router-dom';
 import brace from 'brace';
 
 import * as misc from '../misc';
+import conf from '../conf';
 
 const RecentSnippetItem = ({ snippet }) => {
   const { modesByName } = brace.acequire('ace/ext/modelist');
   const mode = modesByName[snippet.get('syntax')] || modesByName.text;
   const syntax = mode.caption;
   const snippetTitle = snippet.get('title') || `#${snippet.get('id')}, Untitled`;
   const download = () => misc.downloadSnippet(snippet);
-  const rawUrl = process.env.RAW_SNIPPETS_URL_FORMAT.replace('%s', snippet.get('id'));
+  const rawUrl = conf.RAW_SNIPPET_URI_FORMAT.replace('%s', snippet.get('id'));
 
   return (
     <li className="recent-snippet-item">

src/components/Snippet.jsx

@@ -8,6 +8,7 @@ import 'brace/theme/textmate';
 import Spinner from './common/Spinner';
 import * as actions from '../actions';
 import * as misc from '../misc';
+import conf from '../conf';
 
 import '../styles/Snippet.styl';
 
@@ -50,7 +51,7 @@ export class Snippet extends React.Component {
     const snippetTitle = snippet.get('title') || `#${snippet.get('id')}, Untitled`;
     const mode = modesByName[snippet.get('syntax')] || modesByName.text;
     const syntax = mode.caption;
-    const rawUrl = process.env.RAW_SNIPPETS_URL_FORMAT.replace('%s', snippet.get('id'));
+    const rawUrl = conf.RAW_SNIPPET_URI_FORMAT.replace('%s', snippet.get('id'));
 
     return (
       <div className="snippet" key="Snippet">

src/conf/index.js

@@ -0,0 +1,9 @@
+export default {
+  // REST APIs have a base URI to which the endpoint paths are appended. This
+  // one sets a base URI for the XSnippet API we need to communicate with.
+  API_BASE_URI: process.env.API_BASE_URI || '//api.xsnippet.org',
+
+  // When expanded with a snippet ID, it points to a raw snippet page (i.e. a
+  // plain/text page with snippet content and without markup).
+  RAW_SNIPPET_URI_FORMAT: process.env.RAW_SNIPPET_URI_FORMAT || '//xsnippet.org/%s/raw',
+};

src/misc/index.js

@@ -1,6 +1,8 @@
 import brace from 'brace';
 import 'brace/ext/modelist';
 
+import conf from '../conf';
+
 export const regExpEscape = string => string.replace(/[-[\]{}()*+?.,\\^$|]/g, '\\$&');
 
 export function download(text, name, mime) {
@@ -49,3 +51,7 @@ export function formatDate(d) {
 
   return ISOdate.split('-').reverse().join('.');
 }
+
+export function getApiUri(endpoint) {
+  return `${conf.API_BASE_URI}${endpoint}`;
+}

tests/components/Snippet.test.jsx

@@ -35,7 +35,6 @@ describe('Snippet', () => {
   });
 
   it('should show snippet if snippet was passed as props', () => {
-    process.env.RAW_SNIPPETS_URL_FORMAT = '//xsnippet.org/%s/raw';
     const wrapper = shallow(<Snippet snippet={snippet} />, { disableLifecycleMethods: true });
 
     expect(wrapper.type()).not.toEqual(Spinner);

webpack.config.js

@@ -215,9 +215,11 @@ module.exports = () => {
       new CleanWebpackPlugin([path.resolve(__dirname, 'dist')]),
 
       // Propagate (and set) environment variables down to the application. We
-      // use them to configure application behaviour.
+      // use them to configure application behaviour. Please note, 'null' here
+      // means 'unset'.
       new webpack.EnvironmentPlugin({
-        RAW_SNIPPETS_URL_FORMAT: '//xsnippet.org/%s/raw',
+        API_BASE_URI: null,
+        RAW_SNIPPET_URI_FORMAT: null,
       }),
 
       // Similar to JavaScript, we use [chunkhash] in order to invalidate