Serverless Log in and registration - reactjs

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

Related

How to use custom domain for Serverless app with React frontend?

I finished my Udacity Cloud Developer nanodegree and I want to make a custom domain to showcase on my portfolio.
The stack I use includes: Api Gateway, Lambda, DynamoDB, Nodejs, S3 and Serverless framework. Frontend is : React.
However, Im stuck on comprehending how to deploy the full app, with React frontend?
Something like: anc.com would navigate to my app. I found many solutions mentioning about using serverless-domain-manager.
But what about my React front end? I read some solutions saying to deploy static web using S3.
But my app currently has S3 to store the uploaded images.
If I deploy my frontend with S3, do I have to make 2 S3 buckets?
Currently, I have to use 2 terminals, SLS deploy for backend, and npm run start to run the front end at localhost.
My github code:
https://github.com/ploratran/DogLookBook
The team at Serverless has also released a tool called components, one of which looks like its perfect for what you want to do; it automatically handles everything on the cloud to get your React files hosted and a domain assigned too: https://github.com/serverless-components/website

How to link (AWS) RDS Microsoft SQL Server to front end (react native)

I am doing a project to create a login and create an account page and also store different sorts of data that needs to be securely stored in the database.
I am using react native and amazon web service. I am confused about how to use the RDS(AWS) Microsoft SQL Server and to connect with the front end. Do I use AWS amplify?
I saw a post that mentioned
Amplify is at the moment tied to dynamoDB in a very strong way. But you can use graphQL queries sent to AppSync (the backend layer of amplify) to trigger lambda functions. From there you can target any type of database you want
Is there a better or shorter process of connecting the front end with the SQL database. Please give me some tips as it is my first time working with AWS and react native.
There are many ways to accomplish this with AWS. You essentially need a backend web server component in your architecture. The classical solution would be to setup an EC2 and have this server handle REST or GraphQL requests that query your RDS.
A more modern "serverless" option would be to route your front-end traffic to an API Gateway that invokes a lambda function. This lambda function can utilize IAM permissions to query your database. There are many resources for this pattern; here's an AWS blog post about it.
I'm not familiar with the specifics of Amplify, but if you can be flexible switching datastore it seems convenient just to use a datastore that Amplify plays nicely with. I'd highly recommend trying to get Amplify working if you are not familiar with backend web software and don't have time / care to dig into the complexities of it.

Pointing domain name to a reactjs app with a nodejs backend

I am trying to make a portfolio-building app on aws. I am using reactjs for the front end, lambda(nodejs) for the backend, and other various technologies like dynamodb and API Gateway. My question is, how do I get the react content served up every time someone goes to my domain name? Is it done through lambda? Do I need an ec2 instance? I am stuck on this and if someone can help me out I would really appreciate it. Thanks!
There are many approaches you could use to set this up, it depends on what type or architecture you are looking for. I prefer to use AWS lambda functions attached to the API gateway for backend How To Build Your First Serverless API with AWS Lambda and API Gateway, and for frontend host the react.js app in s3 through cloudfront. This setup means that your entire application is serverless and you will be hard pressed to make it out of the free tier on AWS. Here is a great blog article detailing how to set this up Deploying create-react-app to S3 and CloudFront
So where is your front end running?
It could be many locations:
EC2 instance
Elastic Beanstalk (either as a Node app, or as a Docker container)
ECS/EKS (with or without Fargate)
As a series of Lambdas (running behind an ALB)
Without knowing your application and experience of AWS services it's quite hard to advise exactly where you should host it. However, once you decide which one of these you are using you can points its target A record/CNAME at your domain name by editing the A record/CNAME in your hosting provider.

React Native and Firestore

I am beginner on firebase and need some help with project decision. I am building a react native app for someone and for the database I was thinking of using firebase, but when I was going through the docs I realized that firestore offers Backend Service, does this mean I don't have to use any framework for the backend. I was originally planning to use Django but if firestore provides backend service, it will provide lot more ease to the project. Can anyone give me an explanation on this ?
You can indeed directly connect your ReactJS application to Cloud Firestore, bypassing the need for your own server. To secure the application you'd use Firebase's server-side security rules, which allow you to control who can read and write what data. This is of course extra important, since you're opening up the database for direct access from the client applications, and the rest of the internet.
To access Firebase from React Native, many developers use the react-native-firebase library, which wraps more Firebase services than the JavaScript SDK does.

Another front-end technology inqury - but using serverless backend

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.

Resources