Ich möchte das Hot-Reload verwenden, wenn ich meine React-Anwendung in TypeScript mit einem C# Web API-Backend entwickle. Ich benutze .Net Framework und nicht Core, also muss ich IIS oder IIS Express verwenden. Ich kann für das Front-End mit webpack dev server
ohne Probleme heiß neu laden, aber dann kann ich nicht auf die API-Ressourcen zugreifen. Kann ich das erreichen?Reagieren mit Typescript heißen Neuladen des IIS-Webservers
2
A
Antwort
4
Eine Lösung gefunden, die webpack dev server
als reverse proxy für den IIS verwendet.
NPM:
npm install --save [email protected]
npm install webpack-dev-server --save-dev
webpack.config.js, Proxy, wo der IIS ausgeführt wird:
var webpack = require('webpack');
var path = require("path");
var proxy = 'localhost:61299';
module.exports = {
entry: [
// activate HMR for React
'react-hot-loader/patch',
// the entry point of our app
'./Scripts/src/index.tsx',
],
//entry: "./Scripts/src/index.tsx",
output: {
filename: "./Scripts/dist/bundle.js",
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
module: {
loaders: [
// All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
//{ test: /\.tsx?$/, loader: "ts-loader" }
{ test: /\.tsx?$/, loader: ['react-hot-loader/webpack', 'ts-loader'] }
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
// enable HMR globally
new webpack.NamedModulesPlugin(),
// prints more readable module names in the browser console on HMR updates
],
devServer: {
proxy: {
'*': {
target: 'http://' + proxy,
}
},
port: 8080,
host: '0.0.0.0',
hot: true,
},
}
dann kann ich den Web-Server starten, indem Sie diesen Befehl aus dem Projektstammordner verwenden : node_modules\.bin\webpack-dev-server
. Wenn ich dann Zugriff auf http://localhost:8080/
habe ich heiß neu laden und ich kann immer noch die C# Web API, da es IIS Express unter "http://localhost:61299/"
Verwandte Themen
- 1. reagieren heißen Lader nicht die Änderungen aktualisieren
- 2. Reagieren mit TypeScript: Welchen Typ hat render()?
- 3. Formular mit Neuladen senden
- 4. Neuladen des TableView-Abschnitts auf NSTimer
- 5. Formatierung des TypeScript-Indexsignaturobjekts?
- 6. Neuladen des Moduls mit NameError: Name 'reload' ist nicht definiert
- 7. Wie verwendet man childContextTypes, um mit Typescript zu reagieren?
- 8. Wie Standardeigenschaftswerte in Reagieren mit Typescript festgelegt werden?
- 9. Reagieren mit TypeScript - Definieren defaultProps in statuslose Funktion
- 10. Wie heißen # und% in clojure?
- 11. Wie mit von heißen/steigenden Beiträgen
- 12. Wie heißen die JOIN-Teile?
- 13. Reagieren: Leistungssteigerung des Schlüssels
- 14. Erweitern des Builders in Typescript
- 15. Pickles: Warum heißen sie so?
- 16. NullPointerException in RxJava heißen beobachtbaren Stream
- 17. Redux - wie der Reduktions Zustand während der heißen reload halten
- 18. React TypeScript 2.3 -> typsicher Reagieren Bootstrap FormControl onChange
- 19. Wie HTML mit Jade und webpack mit heißen reload codieren
- 20. NN-Training - mit einer heißen Codierung vs mit künstlichen Funktionen
- 21. Migration von react-jsx zu typescript-tsx reagieren
- 22. Knoten require.cache Löschen führt nicht zum Neuladen des Moduls
- 23. Wie zu installieren/zu importieren Reagieren in TypeScript
- 24. Reagieren des SetProps() ist veraltet
- 25. (Rails) Neuladen von "lib" -Dateien ohne Neustart des Servers ...?
- 26. Warum sollte die W3C-Empfehlung immer "Fensterobjekt des Dokuments" oder "Fensterobjekt des Dokumentobjekts" heißen?
- 27. Gelöschte Zeilen werden nach Neuladen des Rasters wieder angezeigt
- 28. ohne Neuladen der Seite
- 29. Typescript-Felder mit Sonderzeichen
- 30. Stop MKMapView von Neuladen