ServiceStack Hot Reloading Typescript - servicestack

I'm using .net core and ServiceStack Angular SPA project template, and I want to enable hot reloading.
From what I saw on site here I only need to add:
Plugins.Add(new TemplatePagesFeature());
<i hidden>{{ '/js/hot-loader.js' | ifDebugIncludeScript }}</i>
And:
SetConfig(new HostConfig
{
DebugMode = true
});
And this works for HTML files, however, nothing happens when I modify TS files (in console or browser), do I need to configure something else in order to allow that?
EDIT
I thought that this will also start something like npm run dev (to run --aot) but does not look like that, so my temporary solution until I find more elegant way is to use something like this and shell extension:
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.Shell("npm run dev");
}

The Development workflow for each template can be found on the project page for each template. E.g. the Angular SPA Project Template requires that you run either npm run dev or npm run serve which starts a watched client build:
Development workflow
Our recommendation during development is to run the dev npm script or Gulp task and leave it running in the background:
$ npm run dev
This initially generates a full development build of your Web App then stays running in the background to process files as they’re changed. This enables the normal dev workflow of running your ASP.NET Web App, saving changes locally which are then reloaded using ServiceStack’s built-in hot reloading. Alternatively hitting F5 will refresh the page and view the latest changes.
Each change updates the output dev resources so even if you stop the dev task your Web App remains in a working state that’s viewable when running the ASP.NET Web App.
Live reload with built-in Dev Server
The alternative dev workflow is to run the serve npm or gulp script to run Create React App's built-in Webpack dev server:
$ npm run serve
This launches the Webpack dev server listening at http://localhost:4200/ and configured to proxy all non-Webpack HTTP requests to the ASP.NET Web App where it handles all Server API requests. The benefit of viewing your App through the Webpack dev server is its built-in Live Reload feature where it will automatically reload the page as resources are updated.
Watched .NET Core builds
.NET Core projects can also benefit from Live Coding using dotnet watch which performs a “watched build” where it automatically stops, recompiles and restarts your .NET Core App when it detects source file changes. You can start a watched build from the command-line with:
$ dotnet watch run

Related

Connecting Node.js to SQL Database in Github Actions

I'm brand new to web development, so apologies if I have the completely wrong idea for this. I'm currently trying to use Github Actions to deploy a React web app to Azure. Npm build, install, and test all work fine but I'm trying to execute a .js file that connects the web app to a server holding my SQL database. To get it working on my local machine, I run "node index.js". With this in mind, I simply added the following step to my workflow:
- name: node run server
working-directory: ./backend
run: node index.js
I've let the Action run for 1 hour+ and it hasn't finished so I assume this isn't the way to go about it. What should I be doing instead?

How to combine vue-cli development mode with server-side api?

I'm new to vue and kind of confuse here.
I'm using vue-cli to build a vue app, I understand I can run a development server with npm run serve which is referenced as a script in my package.json for vue-cli-service serve
But my app need some data coming from a local node.js server. I cannot request this server from development mode because it's running on a different server.
To make my app work I'm obligated to build for production with
npm run build
Then to ask my node server to render by default the produced index.html file.
How could I combine development mode and my node server?
What would be the best way to make this work?
Thanks a lot
I stumbled across this, and found the answer buried at the bottom of the comments list, so I thought I'd highlight it.
This answer is taken from #Frank Provost comment, which really should be the accepted answer. As mentioned in his link https://cli.vuejs.org/config/#devserver-proxy all you need to do is create/edit vue.config.js file in your (client) project root to include this:
module.exports = {
devServer: {
proxy: 'http://localhost:3000' // enter dev server url here
}
}
Then start your dev server as usual from your server project:
[server-root]$ npm run dev
And run your client project from vue-cli project
[client-root]$ npm run serve
Then when you visit the client url (usually localhost:8080) all api requests will be forwarded to your dev server. All hot module replacement still works on both client and server.

Hot reloading in visual studio 2017 for asp.net core spa (react) app with custom web server used via proxy

I have a asp.net core 2.2 react template based app
The react app under ClientApp has my own build script for react app which compiles stuff in a lib folder under ClientApp via 'npm run build' custom script.
More importantly, the app runs with a custom node/express based web server (npm run start in clientapp would launch a web server script which would listen on say port 6000)
I cannot use the standard react development server that comes with template.
The startup.cs file of asp.net core layer uses it via spa.UseProxyToSpaDevelopmentServer (http://localhost:6000)
app.UseSpa (spa =>
{
spa.Options.SourcePath = "ClientApp";
if (env.IsDevelopment ())
{
string reactDevServerUri = Configuration["ReactDevServerUri"];
spa.UseProxyToSpaDevelopmentServer(reactDevServerUri);
}
});
During debug session in vs 2017, on any change in typescript files in ClientApp\src folder, i need to
1.Invoke script 'build' in ClientApp\package.json to compile react app in ClientApp\lib folder
2. Restart my web server running via script 'start' to pick new changes in lib
3.Reload browser
Currently i have added a 'debug' script which uses nodemon to track changes in react app and restart server after build script
"debug": "nodemon -e ts,tsx --watch src --exec \"npm run build && npm run start\""
I still have to reload browser myself and it keeps failing until build/start are finished. I need a better way to do this in one go by proper configuration of encapsulating asp.net core project.
Please help me figure out a way :)

How to run a node app after production build by WebPack when output is index.html?

***Updated for further clarification:
Thanks much for taking the time to reply. Running 'npm run build' (I'm using the Vuetify/Webpack template) created an index.html and a directory named 'static' with the respective html, css, and js (in 'dist' directory). The question is - how can I run this in production using node or pm2 (for example, 'pm2 start myapp.js')?
Doing some further research and testing, the 'npm run build' built as static. It was my lack of understanding how vue-cli was to build for production (via WebPack) (vue-cli builds static meant to be served via web server). Doing further testing, I can load and bring up my app on a couple local Linux servers (the static content running on one servers, while MongoDB and API running on another server (API running with pm2)). Also, I was able to bring it up on AWS S3 (as static). I think I have my answer now. Thanks much for your time.
***From Original Post:
How to run the following node app in production? Webpack build produced an index.html (I assume as it's using html-webpack-plugin). I can view the site if I run under a web server (e.g., nginx), but I want to run my final app using pm2, or running node process.
I am using the Vuetify WebPack template (I'm using Vue.js), when I run the npm run build for production (in package.json: “build”: “node build/build.js”) the output is as follows:
$ ls
index.html static/
and
$ ls static/js/
app.f7301c212bc5fefd6563.js manifest.2ae2e69a05c33dfc65f8.js vendor.1aae36aa0dc798d4d36d.js
app.f7301c212bc5fefd6563.js.map manifest.2ae2e69a05c33dfc65f8.js.map vendor.1aae36aa0dc798d4d36d.js.map
So, how do I run this via node (npm start) or pm2 (pm2 start) (can't use index.html or static/js files).
When I run the webpack build I was expecting a .js output (for example ‘build.js’) to run via node or pm2 (npm start that runs ‘node build.js’ or pm2 start build.js). I suppose this will work for serverless, but was looking to run via pm2 (with nginx as proxy) as the app will have other factors (e.g., MongoDB) that won’t allow running in serverless (e.g., AWS Lambda).
Would this be a matter of just re-configuring WebPack to output to a .js file (for example, build.js), or will the static files (served via a webserver, nginx/Apache/http-server) allow for the same functionality? That is, will there be any factors that would limit my app by running as static verses via ‘node build.js’ or ‘pm2 start build.js’, (for example, will my API connects to the back-end still work (back-end being node/JS))?

node.js/karma/end-to-end testing: failed to proxy /app/index.html (Error: connect ECONNREFUSED)

The following are messages I'm getting while trying to run end-to-end test from AngularJS tutorial http://docs.angularjs.org/tutorial/step_05 on MS Windows 8 Professional. Could you please advise how can I make this test running well?
[2013-06-10 17:27:54.100] [WARN] config - "/" is proxied, you should probably change urlRoot to avoid conflicts
INFO [karma]: Karma server started at http://localhost:9876/
INFO [launcher]: <<< Starting browser Chrome
INFO [launcher]: --- Starting browser Chrome
INFO [Chrome 27.0 (Windows)]: Connected on socket id E20UigDmDqhk3jaRRYAP
WARN [proxy]: failed to proxy /app/index.html (Error: connect ECONNREFUSED)
The error you're seeing indicates that you haven't started the webserver. Since you are using ./scripts/e2e-test.sh to run your e2e tests, you need to have your webserver serve the app from localhost:8000 and the docroot needs point to the angular-phonecat folder, not the app folder. This can be done by simply running ./scripts/web-server.js (see step-00)
Note that there is a second way to run your e2e tests. You can just visit
http://localhost:8000/test/e2e/runner.html
Yes, the problem is that the web server isn't running. Its easiest to run a local one.
See the angular-seed (template project) at https://github.com/angular/angular-seed for details about how to setup a project (from this template) to be able to run testing.
Essentially:
git clone https://github.com/angular/angular-seed
I cloned as 'angular-seed-template-project' and use that as a template for my own projects.
I git pull on this to bring down the latest work and run npm update to pull in its latest dependencies
They actually say to fork angular-seed on git-hub which would allow you to easily git pull to update your project with the latest changes (as per How do I merge a parent fork?). However my understanding is that you can only fork a github project once, which would preclude using angular-seed as a template. Obviously I need to look at this in greater detail.
cd <the-project>
npm test to run the unit tests
npm start to start the web server with the current-dir's app as the base. This will not run as a processs by default so either do that in a different terminal to where you run the command-line commands or start as a process (which is called node that you will need to kill later) - npm start &
npm run update-webdriver to install Selenium and more
npm run protractor to run the end to end integration tests
Doing it this way as per the agile-seed instructions will avoid this error.

Resources