I have an angular app generated like this ng new hello-world . This hello-world app listens to a file that is present in some directory and compiles it and generates a form in the UI. Now I want to make this app a library such that I can use this library in my node application/backend/just call it in my cli by specifying the args to serve the UI.
I want to use something like this hello-world --port 4200 --path ./tmpDir/filename.sol so the app serves in port 4200.
Related
I have two separate applications one is the ionic app and other is node express api app. Is it possible to merge both in one application? Like for example when i enter npm run start it should run ionic serve and node index js both?
Typically after you finish developing your frontend you "build" it. This minifies and optimizes frontend files. For ionic: https://ionicframework.com/docs/cli/commands/build
This creates a folder(the default name can be "dist" or "build" etc). You put this folder in your backend folder, then serve it statically. For static serving check out https://expressjs.com/en/starter/static-files.html.
This way you deploy only backend, and it works. You can make api endpoint routes start with "/api" and "/" routes can be for frontend's static serving.
If you mean you want to do that for development purposes only, you can use concurrently command https://www.npmjs.com/package/concurrently
npm install -g concurrently
After installation, add this line to package.json script
"start": "concurrently \"command1 arg\" \"command2 arg\""
In command1: add ionic start command, like: ionic start
In command2: add node start command, like: nodemon server.js
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 :)
I would like to deploy my angular application with nodejs, mongo, express js on my own server.
My way is:
-> ng build --prod (output is dist folder)
-> ng serve on dist folder
Start backend:
-> node server js file
But I think, it is not correct way od production stage. Added http server on express, there I create another index html view file with hbs, and there I use:
<body>
<my-app>Loading ...</my-app>
<script src="/dist/bundle.js"></script>
</body>
But on dist server, there is multiple js files.
How can I create using ng option (no webpack or must be f.e. webpack?) my angular/mongo/node/express application (in 1, my own server, no aws, heroku, github etc). There is any correct way to do it?
I've been able to deploy an angular app using Caddy Server as the webserver.
Create a build of your Angular code by doing ng build --prod-true.
This creates a set of bundled Js and Html files in the dist
directory.
Copy these files to where you want to run the app.
Next go to the Caddy website and download the version of Caddy for
your os. You can choose all kinds of features but for my deployment
inside a firewall a plain build worked fine.
Drop the caddy file in the directory that you put your compiled
angular code.
Create a caddyfile (just a file named caddyfile), add localhost:(your
favorite port number).
Run caddy and it will automatically serve your app by launching
index.html. You can view your app at localhost:port.
No messy node installation. Caddy has all sorts of add-ons to deal with more complicated scenarios but the deployment is caddy.exe, caddyfile and your built code.
***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))?
I have an application that creates multiple express servers each acting as endpoints at the same time.
Each of them serve a react app that relies on the api from the that particular express server.
How do i use webpack to compile the react app and serve for the particular instance of the app for each express server .
As each react app relies on the endpoint of that instance of express the port number differs.
which i need to communicate to react app through webpack .
Also how do i run webpack when i npm start my server.
You could use the webpack.DefinePlugin to replace identifiers in your webpacked code with anything, like a port number.
In your "start" script, you could do "webpack -w & <however you start your server>", however I would recommend separating the two steps and having two different npm scripts for build and start.