Recentemente ho lavorato con diverse app Angular e Angular 2 e ho affrontato un problema simile. Per tutti gli scenari, le nostre app di backend e di frontend erano separate in termini di codice e comunicavano solo tramite le interfacce REST. Tuttavia, forniamo entrambe le parti frontend e backend ed è stato naturale utilizzare un server di hosting per entrambi (potrebbe essere Play Framework o Tomcat).
Opzione n. 1 All'inizio, abbiamo optato per questo. I webjars sembrano un miracolo e diversi plug-in o maven
possono aiutarti con la minificazione, la compilazione, il linting ecc. Del tuo progetto di frontend. Potrebbe andar bene per alcuni. Purtroppo, ho trovato questo flusso di lavoro innaturale. Alcuni plugin mancavano o la loro configurazione era difficile. I webjars non sono sempre aggiornati, alcuni sono automaticamente disponibili, altri no ... ecc. In un progetto semplice potrebbe funzionare, ma per me non è stato sufficiente.
Opzione n. 2 Abbiamo provato server separati per lo sviluppo ma abbiamo smesso velocemente. Per la maggior parte delle azioni, hai ancora bisogno del tuo server frontend e backend. Quindi devi iniziare entrambi. Significa che hai 2 o più comandi o flussi di lavoro per ricordare e insegnare agli altri. Il CORS non è un grosso problema, ma potresti prendere in considerazione la possibilità di disabilitarlo per la produzione, il che significa lavoro extra nel progetto. Lo sviluppo di backend o frontend separatamente è stato più veloce in questo modo, ma secondo me, se devi fornire entrambi - il tuo processo di sviluppo dovrebbe aiutarti a farlo.
Opzione n. 3 Questo è quello che stiamo utilizzando. Con sbt è possibile e conveniente. Il plug-in SbtWeb
consente di impostare playRunHooks
in qualsiasi azione che si desidera eseguire con il progetto. L'idea è quella di eseguire uno strumento JavaScript accumulo che farà tutti i lavori necessari, frontend, fe:
playRunHooks += {
Process(Seq("npm", "install"), file(portal)).lines.foreach(println)
RunSubProcess(portal, "npm", "run", "watch")
}
RunSubProcess può essere trovato here.
Quindi tagliando la lunga storia breve, lasci che Play Server serva il tuo contenuto statico, ma ignori le sue modifiche.Questo è preso cura di npm
, gulp
, webpack
, grunt
- quello che vuoi. Sono disponibili numerosi strumenti di sviluppo JavaScript, plug-in e modelli per aiutarti. Non è necessario alcun plug-in sbt
, è sufficiente consentire al mondo JavaScript di svolgere il proprio lavoro. Potrebbe essere difficile da impostare all'inizio, ma ripaga rapidamente.
Come progetto di esempio, è possibile controllare il modello di attivatore Play Framework with Angular 2 and Webpack 2 e il progetto è ospitato su GitHub: play-ng2-webpack2. Mi ha aiutato un po '.
Ora è anche possibile utilizzare Tomcat, con xsbt-web-plugin e developmentMode. La filosofia è simile.
Speranza a trovare la strada :).
Il mio vincitore è no. 1 - in questo modo si riduce il requisito per lo specialista di altri framework, anche se si desidera lavorare in stack multidominio e/o app separate, è possibile utilizzare alcune soluzioni come un leggero server HTTP per reverse proxy/multidominio/bilanciamento del carico. La tua domanda è basata sull'opinione pubblica, quindi la mia risposta potrebbe essere solo un'opinione :) – biesior
Grazie, ma conosci qualche tutorial per farlo con angular 2 e dattiloscritto. Ho visto qualche progetto su GitHub, ma sembra immaturo in questo momento – nam
Come @biesior menzionato, è supponente, io per primo, non mi piace per dividerlo in 2 applicazioni, io odio la configurazione grugnito/sorso per le impostazioni del proxy. Il gioco gestisce tutto ciò che è jazz, c'è anche il vantaggio che non devi configurare alcuna impostazione CORS. Quello che ho fatto anche io: non uso webjars ma bower/npm, si trovano nella cartella/public. Definisco un punto di ingresso per angolare, ad esempio: '/ welcome' da lì su angular prende il routing. Si potrebbe desiderare di guardare a questo [domanda] (http://stackoverflow.com/questions/16085544/play-framework-2-1-angularjs-routing-best-solution) –