Hosting my MEAN stack web app on github pages - node.js

I have a project here that is on github. I created a gh-pages branch to make it hosted on github pages. The link they gave me to my hosted site is here.
I am pretty new to web apps and especially new to MEAN stack web apps. My question is - how can I access my web app now that it is hosted via github? Obviously the hosted link gives a 404 error because I don't have an index.html file in the root of the project. The "html" I have in the project is in the views folder and has an "ejs" file extension (index.ejs).
To run this app on my local machine I start an npm server:
npm start
Then I navigate to http://localhost:3000/#/home in a browser to see the app.
Is it even possible to host this app on github pages? Do I need to modify my project in some way to make it work? Also - I know I will have to change the mongoose database pointer for the database portion to work. Any pointers in the right direction would be greatly appreciated!

Github does not host nodejs instances.

If you want to host a it on GitHub pages you can follow these steps:
Separate Angular front end with node back end API.
Host your Angular front end to GitHub pages.
Then host your node back end to some cloud hosting. Make sure you have CORS enabled. It will work as a REST API.
Now use the REST API end points to wire up the the whole app.

Related

NODE JS Project Demo

I have a toDo web application made in NODEJS. I want to include it in my resume and want 2 links , one for project code and other for project demo ? Is there any way to show live demo of this nodejs project just like we can have github pages for a frontend project ?
To show the code, you can put the github link, and for the demo, you have to host your site, for example on AWS or Azure. But these hosting are not free and I don't know if it's possible to host a Node.js site for free
When I hosted my first site, Heroku was the easiest of the free options I looked at. Today I think Netlify is easier.

How to publish and host MEAN stack project in GitHub

How to host AngularJS, MonogDB, Node.js, ExpressJS project on GitHub?
I have uploaded normally like a static HTML page but it didn't work.
How to host this project as it consists of four technologies
You can't host a MEAN stack site on GitHub Pages:
GitHub Pages is a static site hosting service and doesn't support server-side code such as, PHP, Ruby, or Python.
Similarly, GitHub Pages doesn't support Node.js or MongoDB.
Since github pages host only static resources like html, css and javascript you cannot host a node application there. You could try hosting your project on Digital Ocean, Heroku, AWS etc. These provides free trials versions as well. Here you can set up your own server and get things working.

Deploying an Angular website to github pages

I am trying to deploy my personal website to Github pages, it is a very simple one page website developed in Angular2 (using Angular CLI) with some information about me.
The process seemed simple, create a repository called christopherkade.github.io and push my code to it, after doing so my Angular CLI README is being displayed at my website.
A couple of questions:
Do I required a NodeJS server (that I have been using in parallel to my Angular2 app) to run my app on Github pages? (I do not need a backend, I guess that may answer my question)
How may I deploy my website using Githb pages? The documentation lets me deploy a single http file and I cannot figure out how to deploy a fully fledged website.
Here is my repository.

Running angular2 on hostgator (or any host)

I have started getting into angular2 recently and have previously used angularjs. This might seem like a very broad question but all of the tutorials show how to use angular2 on a local environment and show how to serve the app and navigate to localhost:3000 etc. So my question is how do I go about running my app on my hosted server. Like how do I get it to go to my app using www.mysite.com? Do I copy the files to my public_html directory or do I have do do something to make my domain go to the port the app is being served on? Or do I have to turn off apache and do something to use node instead? Any help would be apreciated.
is very simple:
Copy local files into remote folder
Execute ng build --prod
your domain root route should be myremoteFolder/dist
hope this help you
Angular is a frontend framework, which means it runs entirely in the browser. This means it's files are "static", they don't require a web server to dynamically process the way PHP files would. This means they can be hosted anywhere static files can be hosted such as AWS S3 or whatever directory you'd put your images and stylesheets on HostGator.
I'm assuming the localhost:3000 is a simple development server used for local testing. If it does more work than that, such as expose API endpoints that your Angular app calls to, then you'll need to find a host that can run NodeJS applications.

Ghost blog integrated with application

I am new to node, so please excuse me if I am asking stupid questions.
Ghost has been released as NPM module recently. I am trying to integrate it with my application, so I could have custom home page and serve blog on a separate page. Once I do following in my app.js, it takes over all the traffic to my site. How do I configure ghost to serve only the blog?
var ghost = require('ghost');
ghost();
We're missing a few details here so I'll make some assumptions.
If you are hosting node using the default server than (as of this posting) you are out of luck since ghost is setup to run in it's own standalone server. One possible solution is to run both the standard node.js server for your page then another for ghost. That's obviously not ideal but until they fix their integration issues you don't have much choice.
I'm trying to solve the same problem, and currently imagine finding a hosting that allows me to run two node instances (I think that is quite possible with e.g. digital ocean). One - port 80 - will point to Ghost, while the other (on some other port) will host the REST API for the app.
I will then create a blank page linked to a custom template that loads the rest of my angular application - the files will be stored in the assets folder of my custom template, while ajax calls will simply be to the non-standard port.

Resources