Hosting an existing Angular website - angularjs

I am working on a website for a family friend. It's a fairly simple Angular SPA with 3 'pages'. When I'm done, I plan to bundle it into an html, css, and js file. In addition, I own the domain that I'd like to use through google domains.
Currently, I am trying to find a hosting service that will let me upload my 3 files (html, js, & css) and just host it. However, I haven't found any services that let me do that other than AWS. So far, I've tried weebly and squarespace and they make me use their templates and GUI to build the website. If I needed, I could just use their templates. However, I'd prefer to bbuild it from scratch so I can practice my Angular and Node Skills.
Any suggestions for website hosting services that let me upload the html, css, and js files of a website I've already built?
Thank you.

You can do so with any website that supports FTP. If you are looking for something really simple, see:
https://www.bluehost.com/
Amazon, recently launched a service just for this purpose. See:
https://amazonlightsail.com/

Best place to do it : https://pages.github.com/
You can link your domain to gihtub's IP.
If you feel gh-pages are tought. Try others like https://www.hostinger.in/, https://www.hostinger.com/ , https://in.000webhost.com/

Related

how to make google bots crawl my react website with dynamic urls and display them in google

I have this website were we can create new questions. Whenever a new question is created a new url is generated I want google to crawl my website everytime a new question is added and display it in google.
I have my front end in react js and backend in express js.
My front end is hosted in firebase and backend in heroku.
Since I am using javascript and my urls are all dynamicly generated google does not crawl or index them.
Currently I am writing all dymaicly created urls into a file in my root folder in backend called sitemap.txt.
What should i do to achive this?
my sitmap link
https://ask-over.herokuapp.com/sitemap.txt
my react apps link
https://wixten.com
my express.js link
https://ask-over.herokuapp.com
i want to add
https://ask-over.herokuapp.com/sitemap.txt to google search console
In fact create-react-app is the wrong tool when SEO matters. Because:
there is only one HTML file
there is no content inside the single HTML file
heavy first load
etc, [search about reasons of using nextjs a good article
SPAs are the best for PWAs, admin panels, and stuffs like this.
But take a look at https://nextjs.org/docs/migrating/from-create-react-app. And my suggestion is to make some plans to fully migrate to Next.js.
Also, search about react SEO best practies and use the helpers and utilities like React Helmet.
create-react-app is not the way to go if you are going for a seo friendly website.
if it's behind a login screen you can go with create-react-app.
if the site is a blog or documentation site , I would suggest you migrate to nextjs or gatsby js or if it's a very small webpage go with raw html, css , js
It's not possible for Google or any other web crawler to crawl your SPA Websites. The best way to fix this is either to use Server Side Frameworks like Next.js or use pre-rendering and redirect crawlers to pre rendering server instead of main website.
You can checkout prerender.io, it has the open source version as well, you can run it on a seperate server and use one of the snippets/plugins for your web server (apache/nginx/others) to redirect requests to different upstream server.
I've been using it for one of my projects (e-commerce store) built on VueJs and it works like a charm.
To understand the basics, what it does is it'll load your website in a browser, and cache the rendered code in it's database/cache, and when any crawler visits your website they'll be redirected to cache which is the generated html page of your website, and crawlers will be able to read everything smoothly.

Add camunda webapps to (micronaut) project with embedded engine

The goal
I have a micronaut project with an embedded camunda process engine (micronaut-camunda-bpm) and I am trying to integrate the camunda webapps in the same manner as the "spring-boot-starter" for camunda.
So what I am basically trying to do is to integrate the camunda webapps into my own application.
What I have done so far
(According to camunda best practices embedding the webapps into your own app is not easy and there is no documentation for it.. ).
So far I added the org.camunda.bpm.webapp:camunda-webapp-webjar and tried to serve the webapps by pointing the hosting of static resources to the webjar that includes all js/html/css files. I am facing the problem that the angularjs webapps require resources through relative links starting with "$APP_ROOT" which do not get resolved properly.
E.g. stylesheets should get loaded but instead of loading them from /app/welcome/styles/styles.css the angularjs app tries to load them from /app/welcome/$APP_ROOT/app/welcome/styles/styles.css which logically results in HTTP StatusCode 404. I cannot change the links in the HTML since they are included with a dependency.
The questions
Is there a proper way in micronaut how I can resolve the $APP_ROOT properly?
Maybe with some kind of redirect or Filters?
Is this even the right way to integrate the camunda webapps in my own app?
Any help is higly appreciated!

Workflow for Website based on Angular js

I am building an E-commerce website, something like Amazon.com. I am inspired with services and directives provided by Angular Material. But i am new to Web technologies and know enough Angular js to make a substantial working one-page website. Can someone please tell me how should I structure a multi-page website like amazon?
By this i mean how should go about making a proper directory tree so that all js, css, html and php files are in their proper places.
Shall I build website in modules having a page's js, css ,html and php files in one folder and similarly build other pages by keeping their files in separate folders?
I am thinking of having a front-end of my Website to look like Angular material's. Site will have a side-nav containing many sections, subsections and filters.
Please pour in your suggestions and the way a proper multi-page website's workflow and structure should look like.
Dude amazon is not something anyone can build, no offence, do u have any idea how big is amazon, i mean structure wise, it is very diffiult to answer this question in one post but u can follow john papas guide on how to structure ur angular application. This could be the starting point for ur project.
https://github.com/johnpapa/angular-styleguide

What files do I need to host an angularJS website

I'm trying to host my first website. I've made it using angularjs, bootstrap and yeoman as a generator. However when I tried to upload it, I realized that the full size of everything in my folder (including the generated stuff by yeoman) was nearly 100mb.
What files do I actually need to host? Node is nearly 60mb and grunt isn't much smaller. Any advice would be greatly appreciated.
Assuming you have a web server like nginx or apache already on that server, you just need to upload the dist folder that is created when you run grunt build.
You don't need all that generator and node stuff just to host a simple test project.
What you actually need is a single HTML file, called index.html. Include Angular and bootstrap (you can omit this, too, if you can go without fancy styles) and create a file app.js which will hold your application logic.
http://angularjs.org shows this in a neat way on their landing page, just scroll down to 'The basics'
As static angularjs application will contain mainly HTML, CSS and JS files you can host your project on simple apache webserver. (Apache - http://httpd.apache.org/)
If you are making a dynamic angularjs application you will have webservices returning you JSON data. If you implement the restful webservices in Java (using Jersey) you can deploy you entire angularjs application with java webserivce implementation to tomcat web server. (Tomcat - http://tomcat.apache.org/)
Hope this helps!
Decided to answer this old question because its one of the few that show on google when searched.
You do not need to use Grunt anymore, I do not know if this was needed at the time of this question.
instead just do
ng build my-app
this would have saved me some hours.
link to current doc

Upload files to Angular or Rails

I´m trying to integrate a Blueimp Jquery File Upload plugin in my application.
My application has an AngularJS front-end running in a Node.js server and a Rails API backend running in a WEBrick server.
I would like to clarify which is the best practices to store the files? In Angular (this case Node.js) server or the Rails one.
Thanks,
Roberto.
I'm working on an app that has the exact same layout as yours and I came to the same question.
Since I'm trying to separate the back-end and front-end completely and have all the work with the db and files done in the back-end, I found that it's better to save the files in Rails server. That also gives you an option to do background operations with files (using sidekiq, for example), without making users wait for completion in the front-end.
There are lots of tools for file upload from angularJS to the server (Rails), but I personally found angular-file-upload directive easiest to understand and implement. I recommend you check it out.
I hope it helps,
Ulugbek

Resources