Deploying an Angular website to github pages - node.js

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.

Related

Publish Angular App Alongside Web API to Azure

The bounty expires in 4 days. Answers to this question are eligible for a +400 reputation bounty.
muttley91 wants to draw more attention to this question:
Kind of stuck with this one, looking to get more eyes on it
I created an ASP.NET Core app with Angular as instructed via this guide. I'm publishing it to Azure using the GitHub Action support, which was generated by Azure and then I modified to get it to work. I've got it working for my app but only the API seems to publish, and at the designated endpoint URLs. This makes sense since I had to modify the workflow to indicate the API project directly. How can I publish the Angular app (in the UI project) to Azure as well with this same workflow?
Here is the repo for reference: https://github.com/rarDevelopment/rardk-web-dotnet
The workflow: https://github.com/rarDevelopment/rardk-web-dotnet/blob/main/.github/workflows/main_rardkweb.yml
and the API sample endpoint can be seen running here: https://rardkweb.azurewebsites.net/WeatherForecast
the Angular app will get published via npm run build , it says so also in the guide you linked, here
The publish process takes more time than it does for just an ASP.NET Core project, since the npm run build command gets invoked when publishing.
In dotnet static files are stored within the project's web root directory.
Your angular project should be configured to publish the result of npm run build in the web root directory (www) of your dotnet project.
When the built Angular app is in the www directory, then you build/publish the dotnet project, which needs to be configured (see the guide examplecode) to serve static files.

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.

Can we use Ember.js to build a static website?

Can we use Ember.js to build a static website? We are going to store the website in AWS S3.
Kind regards
Yes building a static site is how the emberjs.com website it build.
Prember is the tool to build static sites with ember.
The simple answer is yes! Ember is a fantastic technology to build static sites in 🎉 as #kiwiupover mentioned Prember is the main way to turn an Ember app into a "static site", and if you already have your website built as an Ember App it is very straightforward to add Prember and deploy it on a static site hosting (like AWS S3 or Netlify). If you want the simplest possible way to get started I would recommend deploying to Netlify.
The Ember Website is a great example of a site that is built using Ember and gets great Lighthouse scores because it's also a static site. You can see the code in the public github repo
All that is if you want to build something from scratch, but if you're looking for a super quick way to build a static blog then you could check out empress-blog and you can get a blog up and running in less than 5 minutes if you follow the "super quick start" in the readme on empress-blog.
I have a bunch of other recommendations for building static sites with Ember but you can reach out to me on the Ember Discord (you can find a link on the Community Page)

Can you easily explain the process of deploying ionic (based on react) apps with a node backend?

I recently started using react with a node server as a backend. I'm having problems to understand how to deploy such an app. I'm a beginner with ionic and deploying websites (or rather web based mobile apps) so I apologize if this is an easy/stupid question.
I searched a lot about this but my brain is still struggling to understand the deployment process. As I understand, any website have generally two parts, the frontend built with HTML/CSS/JS and the backend built with nodejs (in my case). If I want to run the app, I need to type npm start in the terminal right? so I'm only running the node server actually, where it will serve the HTML pages (static pages) depending on which url endpoint I wrote, right?
So deploying this is "easy" by copying the static files into a remote server and just run the nodeJs server to serve pages depending on the request, right. Therefore, is the start command here npm start, which will start the whole app.
I'm now using the ionic framework with react syntax and nodejs in the backend. There is a special command to run the ionic app (frontend), which is ionic serve. So if I run this the frontend will show up in the browser. Furthermore, I need to run the node server with npm start to handle requests. Therefore, to start my app, I need the ionic serve and npm start commands. How can this be deployed?
After some research, I read that I need to deploy the ionic app (frontend) and the backend separately. For example the ionic app would be a webapp and the server also a separate webapp (since I'm using MS Azure). The communication between them can be over rest API or web sockets as I understand. Is this the right approach to do this or there is a better/more clear way?
deploying two apps would mean that I need to pay for two apps on azure. Is there a way to minimize costs and have a functional app?
PS: generally, I'm having problems to understand the deployment process. I understand basically how the web works and I can build website on my machine but I'm not confident about my skills when it comes to deployment. Surprisingly, there is not much on the internet about it. Can someone please recommend articles, books or ideally videos that explain this process. Thank you in advance.
here is how you deploy ionic apps as pwa - https://ionicframework.com/docs/react/pwa
if you are using a node backend, the you would start the server same as you would normally, If I am understanding the question
Though your question is not specific to a particular issue but highlights a wide variety of issues, i will still try to explain it.
Ionic is primarily used for creating HYBRID/WEB MOBILE APPLICATIONS. Although you can deploy the code as a website too, but you will not be able to get any benefit out of using ionic for a website only and not using react as a standalone framework.
Be clear on your requirement, your question talks about website and web based mobile apps. Deploying a website and a hybrid mobile application is not one and the same thing. Websites are hosted on servers, mobile apps are deployed in app stores.
If you are not going to deploy to any mobile platform, i suggest you drop ionic and build your website with react.
Now coming to Ionic mobile apps, this is the flow
Create Ionic Project -> Build project for iOS/Android platform -> Deploy these apps to respective app stores
You will not host your Ionic mobile code on any hosting provider.
Your node.js backend code gets hosted on a hosting service. The endpoint URL will change to your hosted servers IP address.
Read about following topics first
What are hybrid mobile applications
What is Ionic
How to build mobile apps using Ionic
Publishing Mobile Applications
Deploying node.js to a cloud host

Hosting my MEAN stack web app on github pages

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.

Resources