Another front-end technology inqury - but using serverless backend - angularjs

We have started to work with serverless technologies specifically with AWS Lambda and API Gateway using the serverless framework. We are working with Auth0 to manage authentication. Question is what is the best front-end technology we should use?
I think that we can build the front-end using S3 and cloudfront. The flexibility of each webpage or a set of webpages without any server sounds fantastic and simple, however I wanted to know of any pros and cons in building out web pages that use standard javascript ajax calls using S3 and cloudfront versus using other front-end technologies such as angularjs or vue?
tldr;: Should we build front-end pages using angularjs, vue, etc. or should we use S3 using pure AJAX calls? What are the pros and cons?

You should find hosting any application that uses a popular SPA framework via S3 is achievable. The fact you are using serverless for the API(s) that will be called from your SPA application makes no difference from the perspective of the SPA (client). The client is referencing a web endpoint only. For secured API endpoints, please look at Auth0's Resource API approach, where you would receive a JWT ID Token and JWT Access Token on successful authentication, and send the JWT Access Token with each request. More information on this on the Auth0 website together with samples illustrating how it all works.
Regarding choice on SPA framework / JS technology to use - here are a few useful links to help getting started:
AngularJS - https://auth0.com/docs/client-platforms/angularjs
AngularJS 2 - https://auth0.com/docs/client-platforms/angular2
EmberJS - https://auth0.com/docs/client-platforms/emberjs
EmberJS 2 - https://auth0.com/docs/client-platforms/ember2js
React - https://auth0.com/docs/client-platforms/react
jQuery - https://auth0.com/docs/client-platforms/jquery
Vanilla JS - https://auth0.com/docs/client-platforms/vanillajs
Hope your project is a success.

Related

Serverless Log in and registration

Im new to using the serverless framework and I need to make a log in page and registration in my React js app. I'm using MongoDB and Serverless as my api. Could someone point me in the right direction how to make this work, since I had no luck finding any examples online.
Here is a serverless fullstack application boilerplate which contains registration and login, using AWS Lambda, AWS HTTP API, Express.js and React. It does not use MongoDB, however, as that does not pair well w/ AWS Lambda due to connection issues. Instead it uses a single-table design with AWS DynamoDB to store application data.
https://github.com/serverless-components/fullstack-app

ADAL, Angular and WEB API strategy

I am a Microsoft developer. Making an ASP.NET application with authentication to Azure AD is very easy. The traditional multi page application with Vue (as an example) can be created within two minutes (by using the Authentication wizard in Visual Studio). However watching some Angular and NPM videos I liked the CLI/npm approach. So I decided to build my next project using ADAL.js, ASP.NET Core API and Angular 6 (deploy to Azure web app). But I haven't been able to succeed, and have only been met by complexity and issues.
Is the combo of these three technologies just a bad mix, Visual Studio not suited for SPA, or have I just gotten a bad start? Any suggestions on a good setup? I am considering to split the API and front end in two apps, so I can use clean Angular without having to worry about who is building TypeScript (VS or Node) etc. But then I need two web apps, and have to worry about CORS. Any suggestions here, what is a good setup to get started?
I have followed a lot of articles like:
http://www.talkingdotnet.com/how-to-create-an-angular-6-app-with-visual-studio-2017/
https://www.npmjs.com/package/microsoft-adal-angular6
But all of them had issues.
Refer to this Microsoft published GitHub sample. This sample demonstrates the use of ADAL for JavaScript for securing an AngularJS based single page app, implemented with an ASP.NET Web API backend, that calls another ASP.NET Web API using CORS.
Call an Azure AD protected Web API in an AngularJS Single Page App

Deploy angular js (front end) on s3 and Api's(Backend) on API Gateway

I want to make my website more secure. So i was thinking of deploying front end(using angular js) on s3 with aws cloudfront and all my api's(using dropwizard) in API gateway.
How to deploy angular ap on s3 bucket using cloudfront?
Is it possible to call api's from the s3 bucket?
i have researched on this but i get only for angular app and not the other part(calling api's from the s3 bucket).
THis should work without a problem. I have angular apps that are hosted as static s3 websites, calling back-end api's (both thru amazon api and other custom api endpoints running on ec2 instances).
SO yes, in a general sense this will work - if its not working for you, you could give us specifics about what you are trying to do, and what error messages you are getting.

How to set up authentication already setup in MEAN app in Ionic app?

I am developing an application using MEAN Stack. However I am developing an app using ionic framework for the same application. How would I use the same authentication used in MEAN, in Ionic framework app?
Ionic Framework is built on top of Angular. I would suggest you to use token-based authentications for that; one popular strategy would be JSON Web Tokens (JWT). JWT is basically a standard to transmit data between communicating entities (client/server) through JSON.
I am not exactly sure what kind of authentication system are you using in your MEAN app. It's very likely that you will be using cookie-based authentication. If that is the case, you will need to alter your code so that instead of storing user/session info in cookies, you'll store them in JSON. You can check out the jsonwebtoken module for that.
There are a couple of token based authentication tutorials out there. You could try these out:
https://thinkster.io/angularjs-jwt-auth
http://code.tutsplus.com/tutorials/token-based-authentication-with-angularjs-nodejs--cms-22543

API REST to be used for an angular application and a mobile application

I'm building a REST APIs in Symfony2. The idea is to use these apis from a angular web app and a mobile app. Authentication is required to use the APIs.
I thought in the following possibilites:
Separate Symfony and angular in diferent projects:
The URLs under /api would use OAuth2 to authenticate user (FOSOAuthServerBundle). Both web and mobile app would need to use an access token.
Include angular inside Symfony: In the web app the users are authenticated using a symfony form, and therefore no need to protect the urls under /api with OAuth2. But how would authenticate users from the mobile app?
Please, any help is good!
In short, what I need is that the APIs can be used from two clients: web app and mobile app
Thanks!
I'm currently studying and suffering from the same problem and so far the best option I've seen is to keep the projects separate. If you include angularJS in your Symphony project, you will end up using resources that Symphony provides that you won't be able to replicate in the mobile structure. By detaching the server with the client completely, your Web App built only with Angular will be more similar to your mobile app, mimicking the stand-alone application mode.
Personally, I chose JWT Auth since it doesn't require 12 tables in your database, but using OAuth2 would have similar result.
Is always better to choose some solution that is already tested for many people and is used by them. So, I think is better you to use the OAuth technique, so you can consume your api from mobile, web and every other technology.
If you will join the API and WEBApp is up to you. because REST use no session and every call is a new call that you need to check and block or respond. I have an app that has an Codeigniter API and an AngularJS APP in the same project, but thoose does not share any exclusive thing as sessions.
I built e-commerce with FOSRestBundle, HWIOOauthBundle and FOSUserBundle
From server side, generate accesstoken and authenticate via api/login/ api/login_check/
write your security.yml routing access
From client side, call your api. It should render 200 or 403 HTTP_Code.

Resources