Utilizzo di SPA (applicazione a pagina singola) in produzione con un file / modulo di configurazione separato

Hai perfettamente ragione che dovrebbero essere gli stessi artefatti che vengono distribuiti in tutti gli ambienti. Soprattutto in npm, le dipendenze tendono ad essere definite in modo approssimativo, quindi una dipendenza aggiornata potrebbe facilmente interrompere la compilazione semplicemente costruendo in momenti diversi. Anche se non si usa hat o tilde nelle dipendenze dei pacchetti .json transienti potrebbe essere meno severo con il controllo delle versioni.

Ciò che è suggerito nell'altra risposta riguardo a dotenv non funzionerà se non lo combini con # 2 og # 3 da questa risposta.

Fondamentalmente hai alcune opzioni.

1. Accendi l'url per trovare l'ambiente corrente in cui ti trovi. Questo è un trucco completo. Non farlo !!

2. Alcuni codici side server sostituiscono i vars globali in index.html su ogni richiesta. La soluzione più semplice dipende da cosa hai installato sul tuo server. Potrebbe essere php o anche qualcosa di semplice come SSI se si è su IIS. Ti consigliamo di mantenere index.html come codice html valido, in modo che tu possa ancora eseguire lo sviluppo locale. SSI è bello in questo senso poiché funziona all'interno dei commenti. Se fai php, tieni il tuo index.html e fai un index.php che legge index.html ma sostituisce i tuoi vars. Un parser html funziona bene per questa sostituzione.

3. Configura la tua versione per generare un index.html trasformato dall'index.html creato durante la compilazione. Questo indice trasformato contiene un'istantanea di variabili per un determinato ambiente quando la versione viene eseguita sull'ambiente.

Se le tue esigenze sono semplicemente variabili di configurazione, ti consiglierei # 3. Se hai bisogno di qualcosa di un po 'più avanzato, vai su # 2.

Is there any way to have configuration & application code be separated in an SPA?

Questo non è solo un problema di ZPS.

Se dai un'occhiata a l'app per 12 fattori , ottieni il consiglio

The twelve-factor app stores config in environment variables (often shortened to env vars or env). Env vars are easy to change between deploys without changing any code; unlike config files, there is little chance of them being checked into the code repo accidentally; and unlike custom config files, or other config mechanisms such as Java System Properties, they are a language- and OS-agnostic standard.

Se stai facendo roba di nodo, c'è il pacchetto dotenv , che ti offre ciò che hai chiesto. Oppure se stai usando il webpack (che è probabile), c'è un pacchetto speciale dotenv-webpack .

Per quanto riguarda la sicurezza: se vuoi controllare la versione dei tuoi "file segreti" all'interno del repository, c'è blackbox da StackExchange (sì !).

Altrimenti, c'è Deposito anonimo , se stai utilizzando Ansible o Hashicorps vault . Se questi corrispondono al tuo caso o ai tuoi bisogni, devi valutare da solo.