I have created Angular-universal app with reference to this Angular GitHub Repository. I have used node express for server-side rendering.
I have built using this command
npm run build:prod:ngc
now I got the client and the server folder in the dist folder. No other files there like index.html.
Previously I developed the angular2 app using CLI, on building that it create a dist folder with bundle.js, index.html, and CSS files. I used to upload that particular thing to shared hosting. The app was working fine. But in angular universal I am confused. I am stuck on how to proceed further for production. I have the shared hosting, Please help me how to host the project in shared hosting.
With universal you have to set up the server first and then start the server to listen at some port(80 normally :P)..
normally.. once you setup the node server on the hosting area, you can just go to your source code and start the server using cmd:-
sudo PORT = 80 npm run server (if ubuntu)
to listen at port 80 and then you can access the site then using IP/domain name.
Related
I'm trying to get my app and server hosted on Heroku to work when deployed, but it's not. Client and server seem appear to be running, but the api calls are returning 404s. I'm guessing the configs are messed up somewhere.
Here is my repo: https://github.com/kpermenter/test-deploy and my Heroku settings are attached.
Any insight would be much appreciated!
This is because you haven't made the client files available publicly, you can do this by using:
app.use(express.static('../client/build'));
in the server.js file
if this doesn't work you can try creating a 'public' folder inside the server folder then copy the contents of the build inside the server/public folder and then use app.use(express.static('/public'));
and just deploy the server folder itself
I hope one of you can help me with this since I'm really struggling:
I have developed a static website locally (on Ubuntu 20.04). The website uses a node.js file (app.js) and some node nodules.
Locally the app.js lives outside the "public" folder along with the package.json and the node modules. When I run "npm run dev", the file spins up a virtual server (localhost:5000).
For the static site to be able to use the stuff inside of the app.js (sending emails with nodemailer, and connecting to mailchimp via the mailchimp api), I have to access the site through the localhost:5000.
EDIT: In my html-files, I have a form that POST to the endpoint '/subscribe', an endpoint that is picked up by the app.js file for further processing by express, and the mailchimp api.
When I'm on local, everything works as it should.
Now to the question: How do I make this work on a live server?
The static files are online in a "public" folder on the server and the front end works fine.
EDIT: I'm on a VPS running Ubuntu 20.04, Openlitespeed and the latest versions of node and npm.
I have created my project with Create React App and for a server using nodeJs but when deploying to production, the file index.html is missing in build folder. I've checked the public folder and the template of index.html is still there.
Refer to react-create-app documentation. Creating a production build
When running in development mode, create-react-app spins up a server that serves everything from the public folder.
Thus, in production, your express app also needs to serve everything from the public folder.
server.use(express.static("public"));
I currently a web app involving a Vue.js frontend with a Flask backend acting as a REST API. They are divided into the client and server folders in my repo, respectively. I am looking to deploy it to Heroku via the Github deployment feature but am running into some errors and questions I need clarified.
All code can be found in this Github Repo: https://github.com/justintranjt/thrive-test
In development, I have been running the application like so:
In one terminal run thriveApp.py. In another terminal run npm run dev. Navigate to localhost:8080 which is the local server running
the Vue.js application.
Is this how the application will be run on Heroku? Or is the Vue application run using npm run build? In that case I would have to take the produced build folder and serve it in the Flask application, correct?
In addition, some of my links between the frontend and backend specify localhost:8080 and localhost:5000 (8080 is Vue and 5000 is Flask) which work locally. But will this work when deployed to Heroku?
<b-form>
<b-button variant="primary" href="http://localhost:5000/loginPage">Login via CAS</b-button>
</b-form>
As you can see here, I have a button in my Vue application that links to a login page routed by my Flask application. Will I have to change the portion of the URL that says localhost:5000 when running on Heroku?
Finally, When I currently try to build the application on Heroku only the Python portion of the code is recognized as modules from the Vue app specified by package.json are not installed while plugins for Python specified by requirements.txt ARE installed by Heroku.
I have a feeling all of these questions are generally related to each other. Any other advice or tips regarding Heroku deployment would also be helpful as I'm quite confused about deployment at the moment.
Is this how the application will be run on Heroku?
No! npm run dev spins up an entire development server with vue in dev mode and hot reloading. That's a lot of overhead, especially when it comes to file sizes.
Or is the Vue application run using npm run build?
Kind of. Vue doesn't need to run on your server at all, it's all client-side. npm run build bundles and minifies your files to a dist folder, you'll be left with only html, css and javascript - this is all of the frontend code that needs to be on your production environment - no need to deploy any of the source files. All you need to do is serve those static files from any server. This could be done by your flask, or just any apache, nginx etc.
But will this work when deployed to Heroku?
That will be very tricky to setup. It's one of the reasons why I would not deploy front- and backend on the same (virtual) server.
modules from the Vue app specified by package.json are not installed
If you deploy your bundled frontend instead of the source code this wont be an issue anymore. I still recommend serving the frontend from a different environment.
I have a mobile (Ionic 2) chat application with the following implementation, that uses nodejs-0.10 and MongoDB 3.2.7 and Meteor 1.4.1.1. It works perfectly on my localhost.
Now I need to deploy it to an OpenShift server. I have followed the following steps and created a server on OpenShift with Meteor. It is connecting with Git, and I can push my code to the server.
I am pretty sure the Meteor server is running on OpenShift, because I saw something to that effect on the startup logs (via ssh). However, I am not sure how to connect to the Meteor server to test it.
The domain is nodejs-easyjobs.rhcloud.com (54.208.77.250) on the OpenShift server, I can ping this successfully.
I am using Ionic 2 to build the mobile app. I am currently just running on Android, but plan to add iOS and Windows.
I am following this tutorial, and it runs on localhost. However, I am not sure where this is configured. I guess localhost is default, and you need to change it to a different host if needs be.
If I check my OpenShift server (nodejs-easyjobs.rhcloud.com) via ssh, I can see that the contents of the Meteor bundle directory is on the server. So Git is pushing the code.
The part I don't understand is:
Do I need to configure Meteor differently for being on the OpenShift
Server? Or do I just leave it as is?
Where do I configure the client
(Ionic 2) to point to the OpenShift server?
Question:
My question is, how do I configure my mobile app (Ionic 2) to connect to the OpenShift Meteor Server?
UPDATE:
My dir structure:
openshift-appname
.../ionic-apps/nodejs/bundle/server/...
meteorapp
.../ionic-aps/myIonicApp/api/.meteor/...
.../ionic-aps/myIonicApp/api/server/...
The contents of the .../ionic-apps/nodejs is cloned on the OpenShift server with Git.
I followed this tutorial to deploy the Meteor bundle to OpenShift. `
So I used the following to build my Meteor app:
> cd .../ionic-aps/myIonicApp/
> meteor build .../ionic-apps/nodejs --directory --server-only
As far as I can see, I may be wrong, but the Meteor Server is all correct and running on OpenShift. I need to know how I can get my Ionic2 app to access it.
Step1: Find the access point to the Meteor server using the OpenShift
IP. i.e. nodejs-easyjobs.rhcloud.com (54.208.77.250).
Step2: Configure my Ionic2 client to use this.