I have question that came to mind about an Angular project for which I cannot find a satisfying answer. When I googled for it I only came up with how to deploy the application and not an answer which answered my specific question.
Normally when an angular application is developed we can run ng serve in order to get a development server. When we then visit the dev server we get served the following files which are required for the SPA.
The development server serves our only static HTML asset the index.html file and the necessary bundles of compiled angular code on which our application runs.
When we deploy an Angular application is the Angular application still in need of a server on which serves the application? Or can we just serve this bundle of files from our backend?
You need to generate your application files with $ ng build command. The build artifacts will be stored in the dist/ directory. Then you can use a service like Surge as a static web publishing or other webserver.
On the other hand, if your application use Angular Router, what I said above will not work wonderfully. You need to add a middleware.
If you're using Express for example you need to add something like this:
// server.js
const path = require('path');
app.get('/*all', function(req, res) {
res.sendFile(path.join(__dirname + '/dist/index.html'));
});
Hope I help!
Related
So I am attempting to deploy an application built with React and Parcel JS bundler.
My question is, if it is not being deployed to Github-pages, but to a server like "BlueHost" for example,
Do I upload the "Dist" folder that Parcel bundles after parcel build command?
If so can someone explain how the process works after the "dist" folder is uploaded.
How is it able to find "index.html" .
I am just trying to put a react and parcel project onto my portfolio website which is hosted on (BLueHost), don't want to use Github-pages for this particular project.
Hope that made sense?
Thanks!
Assuming all the files necessary for your web app are in the dist directory, then yes, that's what you would upload. You will need to serve them with a web server. You could either write a simple server yourself, like this Node example:
const express = require('express')
const app = express()
app.use(express.static(__dirname + '/dist'))
app.listen(8000, () => { console.log('listening') })
Or you could use an existing web server like Nginx, Apache, or Caddy, which you would need to install and configure on your server. Files sitting on a server aren't accessible unless there's a process actually serving them up on a port accessible to the web.
This tool is from DigitalOcean, but is very useful and should help you if you decide to use Nginx on BlueHost.
I created two applications in my repo using nx: myapp-nodejs, myapp-angular. (not nest)
Now, I want to deploy those apps to my server. (I don't want to use nginx to create a route for api and route for static files - let's say I don't want to use nginx anyway).
myapp-nodejs application runs express and serve the index file.
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, './public/index.html'));
});
So now I need to build those apps, and then copy myapp-angular dist to myapp-nodejs dist\public folder (for the sendFile).
When I try to run the nodejs application in my server it's say I need some packages that in my package.json in my root package.
The problem is I'll install unnecessary packages like angular and more that my server don't need them and not belong to nodejs runtime.
So I though if there is a way to know "this are the packages for nodejs"? in json format maybe? so I do script that detect dependencies against the root package.json and extract the necessary?
I prepared an ember-cli project that gets api from express server. Then I added fastboot to using the command:
ember install ember-cli-fastboot
After that, all the links began to be rendered on the server. Tell me, how do I run this in production?
If I run ember build and load the project from the dist folder (via express route), the application opens like a usual SPA, and the child pages do not reload, and are not accessible for curl. That is, it behaves like a usual SPA.
Please tell me how to run it? Should I run it in production as it is, withowt build, i.e. from ember-cli folder, using ember serve?
Thanks for any help.
The recommended way to serve an Ember FastBoot application in production is currently using the Ember FastBoot App Server.
Ember FastBoot App Server is a Node.js HTTP server. It serves your application build. So you should still do you normal build. But you replace the static web server with Ember FastBoot App Server. It's documentation contains a Quick Start example.
I realize that there have been similar questions asked here, but I sort of need things to be spelled out for me.
I have a VPS (through Vultr), which currently hosts a frontend Vue.js app on port 8080, and a backend Node.js (with Express) app on port 5000. The main directory is divided like so:
./client
frontend Vue.js files
./server
backend Node.js files
The frontend app includes a contact form, which upon submit makes an axios POST request to the backend app. The backend app then uses Nodemailer and a Gmail account to send an email with the form's submitted information.
As it stands, I have to run my Vue.js app and my Node.app at the same time on different ports. This seems strange to me, considering that they're really just parts of one cohesive app, and my goal is to eventually host it as a website on port 80. With this in mind, I'd like to ask what the standard practice would be for hosting the frontend Vue.js app and the backend Node.js app together.
Thank in advance for any replies.
Try to think about it in this way that Vue.js is another js library. So if all the code for Vue templates can be bundled in a single file, then you can use that file in your index.html( I hope you know how to host a basic static page using express). The thing you require here is a "package bundler" like webpack or gulp.
A package bundler helps you to compress and bundle your code. So just bundle all your vue files into a single javascript file and use it. I apologize for not being able to spell out the things for you I hope it helps.
I am developing a web application using Sailsjs for the backend and Angular.js for the front end. To scaffold the Angular app I have used yeoman with the angular generator and for the back end I used the default Sails app generator.
During development I run 2 servers, the 1st is the sails server to host the back end and the second a grunt server for the front end.
For now my configuration works fine but when in production I want to combine the two ends in one and have sails server serve the angular web app...
Can someone explain how to do this?
I haven't used Sails before but it looks like it generates an assets directory. If you'll notice, Yeoman created an "app" directory into which it put the index.html, JavaScript, styles, etc. It appears you could transfer the contents of the Yeoman "app" directory to the Sail "assets" directory and it would be served up.
http://sailsjs.org/#/documentation/concepts/Assets
If no one with specific experience with Sails shows up, maybe that will help some.