I am currently developing an app using Reactjs. I had hidden my API keys and AWS keys in the dotenv file. But I just realized that this was absolutely not secured. My current set up is that my app is running in an S3 bucket on AWS, and I was wondering if I could use my EC2 instance to hide my keys from users, but still being able to get them in the app.
This is the first time I am developing an app in Reactjs and I don't really know where to start.
Have a look at AWS Amplify, it makes that process super easy.
Using React & AWS Amplify, you can create a serverless architecture for this type of setup with minimal work. You can get started by following the instructions at https://aws-amplify.github.io/docs/
In a nutshel :
Install with:
npm install -g #aws-amplify/cli
$ amplify configure
Then in your project :
amplify init
amplify add api #this will create your API as AWS Lambda functions exposed through Amazon API Gateway)
amplify push #to create all this on your AWS account for you
If you search for 'aws amplify react' you will easily find a dozen blog posting showing you how to get started. There are so many I can not recommend one in particular.
Related
I had developed an app using Expo and published it in Google Play Store. It was running fine till now. But now I have a requirement to add a payment gateway. As of now, only stripe is available in expo. I wanted to add Razorpay Payment Gateway in the app.
So, I tried to eject the app and worked on it. But there were certain issues while building apk file. Then I tried to create a bare react native app from scratch and eventually I completed the work.
Now I want to publish the app in google app store.
If I create new keystore credential and upload it in Play store, will it work or I will have to use same keystore credentials that i used using expo.
You need to use the same keystore and applicationId. The versionCode of the new app needs to be higher than the existing versionCode.
We are evaluating both AWS Amplify and MeteorJS for a new project, and I am wondering of both can be used together; use Amplify inside a Meteor app and publish the app on AWS.
Is this possible?
I don't really see the integration areas but I see a lot of overlapping in terms of results. Would you think of using the Amplify React components into a Meteor project or a certain part of Amplify?
I'm reviewing this demo of how to integrate Cognito with Angular, and it amazon-cognito-identity-js for the authorization service.
It seems that is what we should be using, but other tutorials install AWS Amplify as a whole:
npm i aws-amplify
Curious what the difference is and whether one is more current than the other?
amazon-cognito-identity-js used to be a separate package specifically for Cognito. Recently they've been bundling all their SDKs into Amplify to streamline the integration process.
For instance in our iOS app the Cognito SDK had a number of issues that were resolved by moving to Amplify.
As you can see in the link below, this package is now maintained in the Amplify umbrella.
https://github.com/aws-amplify/amplify-js/tree/master/packages/amazon-cognito-identity-js
It used to be standalone here:
https://github.com/amazon-archives/amazon-cognito-identity-js
I would recommend going forward with Amplify as that is the direction that AWS development is headed internally, and amazon-cognito-identity-js is maintained as part of Amplify anyway.
To add to the great answer by #DaveS. There are 3 official tools you can use to integrate Cognito in your app:
Amplify
Use it in client-side applications, where you'd use Amplify anyway - to leverage the premade auth UI components or to integrate with other services from the Amplify ecosystem: APIs, Analytics, Storage, etc.
Does not support secret-enabled Cognito app clients.
Cannot make authenticated (requiring AWS credentials) Cognito API calls (e.g. adminCreateUser) directly, but there's a workaround.
amazon-cognito-identity-js
It is a much smaller package and it comes as a part of Amplify (hosted in the Amplify monorepo).
It can still be used separately if you don't need any of the extra features provided by Amplify (save on the bundle size).
Does not support secret-enabled Cognito app clients.
Cannot make authenticated (requiring AWS credentials) Cognito API calls, e.g. adminCreateUser.
Can be used in the backend (unauthenticated Cognito APIs only).
AWS SDK
Low-level as it can get.
Provides access to all (authenticated and non-authenticated) Cognito APIs. For authenticated, make sure the code has access to AWS credentials.
Can work with secret-enabled Cognito client apps (you need to sign the requests with the secret).
Can be used in both client (for unauthenticated APIs only, otherwise you're exposing secrets) and server applications.
Code samples for all 3 can be found here: AWS Cognito: Amplify vs amazon-cognito-identity-js vs AWS SDK.
I'm using the Amazon's JavaScript AWS-SDK to set the region and credentials for me to use Cognito on my client application. The problem is that the AWS-SDK is huge! Is there a way to import only what I need or not importing anything from the AWS-SDK at all?
Here is my code:
import AWS from 'aws-sdk/global'
AWS.config.region = region
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: IdentityPoolId
})
From the Cognito SDK docs:
The Amazon Cognito Identity SDK for JavaScript depends on:
The CognitoIdentityServiceProvider service from the AWS SDK for
JavaScript
So you can't use it without the regular AWS SDK for JavaScript. However on that same page it tells you how to create a slimmed down version of the AWS SDK that only includes the needed Cognito dependencies. It also provides a direct link to a slimmed down version ready to use (but with a different namespace). I would recommend going here to download a custom version of the SDK that only includes the pieces you need.
There are specialized versions of the AWS SDK just for Cognito and you can build the AWS SDK just for the services that you require.
Here is an example just for Cognito:
Cognito Identity SDK
Here is the link to build your own custom AWS SDK:
AWS SDK for JavaScript in the Browser
I recommend customizing the official JavaScript SDK and not using specialized versions as the APIs and use cases can be different or limited in functionality.
There is a third option which is to not use the AWS SDKs at all and code everything by hand. This is definitely for experts as you have to deal directly with the REST API, creating signatures, etc.
A Google search will turn up lots of variants of the Cognito SDK.
I have a React + Webpack/Babel + Node/Express application and I want to deploy it on AWS.
Would I have to deploy React and Node/Express separately? Or could they be deployed together at once?
1. If you have two distinct projects
e.g. a React single-page app and a Node/Express API.
a. You can deploy both separately
the frontend (the React app) on S3 and CloudFront (tutorial)
the backend (the Node API) on Elastic Beanstalk (recommended) or EC2
Another option is to deploy both parts together at once on Elastic Beanstalk or EC2. However, you'll miss out on the benefits of hosting on S3 and CloudFront, i.e. faster delivery for your users and cheaper costs. In my opinion, it's also more convenient and less prone to unexpected errors to update and deploy separately the client-side and the server-side of a web application.
Another benefit of deploying separately: For organizations with different teams for the frontend and backend, it's easier for each team to be able to deploy their side of the application on their own without depending on the other team.
b. Why S3 + CloudFront instead of S3 alone?
all the benefits of using a CDN
your own domain name and a free SSL certificate in 1-click
redirection on 4xx errors (necessary if your app uses a HTML5 History-based router)
the caching system
http2 and http to https redirection
c. How to handle CORS?
You can use different subdomains, e.g.
api.domain.com for the Node/Express API
app.domain.com for the React app
Then enable CORS in the API:
app.get('/api', cors({ origin: 'https://app.domain.com' }), ...)
2. If you have a single project
e.g. a Node app including some React views.
You have to deploy the whole app on Elastic Beanstalk or EC2.
Note: If you have a single project including two sub-projects (i.e. a folder for the React app and another one for the Node API), and if both sub-projects still work when they are separated, then you can deploy the sub-projects separately (see first part of the answer).
3. In both cases
Run your Webpack build before deploying the React part. You can do it manually (before deploying on AWS) or automatically (in your CI/CD system). If you bootstrapped your app with create-react-app (CRA), just run yarn build or npm run build at the root of the project and upload the content of the "build" folder to your S3 bucket.
4. Tools
Official AWS S3 CLI - Manage S3 buckets and objects using high-level aws s3 commands.
Official AWS Elastic Beanstalk CLI - Manage and deploy your backend using eb commands.
S3-deploy - CLI utility for deploying files to S3.
5. If not restricted to AWS
I answered a related question not restricted to AWS.
Basic Concepts
To deploy your app hassle free, you need to learn about three concepts: Microservices, containers, and process managers. I will discuss them with a bit more details and few links to get you started:
Microservices
Microservices is an architecture that allows you to divide your app into smaller services. This has multiple benefits:
1- The services are easily testable.
2- The services are replaceable.
3- The services can scale separately.
Containerization
Almost every useful app has at least dozens of dependencies. You can install dependencies on the target machines, but most certainly you'll face few challenges. Programs like Docker allow you to create a container for your app and deploy that container on the cloud. (Regardless of the cloud provider) Learn more...
Process Managers
Process managers ensure that your app is running smoothly and all parts are healthy. If your app crashes, it can easily restart the app.
1. Deploying a serverless NodeJS / React Application
Note: This approach does not work if you are doing server-rendering with ReactJS. Go to the next option.
You can simply build your app and deploy it to a static S3 website. This option works if you use microservices architecture to separate your API from your react app.
Creating a static website in S3 is really simple:
Create a bucket in S3 with the exact name of the website. Example: blog.stackoverflow.com.
Enable static hosting
Create an A record in Route 53 and connect it to the bucket you created.
For more information check AWS handy documentation.
2. Deploying a NodeJS application into EC2
You can launch different EC2 instances for every microservice. (API, React app, etc.) You need to use a process manager such as PM2 to ensure your app is running smoothly.
Continuous Delivery (Automating deployment)
To create an automatic deployment, I prefer to use Terraform in combination with Ansible. Terraform is very declarative. You describe how the cloud infrastructure should look like and Terraform build it for you.
Ansible, on the other hand, is very procedural and is perfect for provisioning a new server.
Error handling and reporting: Sentry
Ideally, you should have unit tests to prevent shipping buggy code to the production. (Use Jest with supertest, Enzyme for shallow rendering). But the world is imperfect, and it is good to receive any potential bugs that happen on the client. Enter Sentry
Both react and node code can be combined and deployed at once
you can more information here:
How to deploy reactjs and node typescript on elastic beanstalk using eb cli