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?
Related
I was trying to connect different frontend tech together in a React host using microfrontend.
I managed to connect react, vue, VanillaJS application to the React host, but i am not able to wrap my head around Ember JS, since vue, Vanilla were not framekwork, it was easy to connect them using webpack ModuleFederationPlugin.
I tried searching it over internet couldn't find any help, Is it possible to connect Ember JS application to a react based host environment(using module federation) ??
If yes would like to see an example if it's available online. (github or sandbox links)
Have you seen these docs: Embedding Applications
The gist is that on the application's rootElement property, you can set a dom selector:
There are more steps as well, but this should get you started.
Kind of a caveat though, building ember projects currently requires the ember-cli, and I don't know if it'd be possible to "just use a webpack plugin", unless you pre-build the ember app before building your host app.
I haven't been able to find any real solid tutorials / examples of integrating payment into a Meteor app, just what's available using Nodes.JS with Express
Stripe guide I'm trying (and failing) to follow / integrate into my app
This is a possible solution, but I could use help dissecting it for Stripe integration following the guide listed above
Are there any simple guides that do not include mrgalaxy:stripe as their solution
That package hasn't been updated since 2016 and I'd really prefer more up to date dependencies
I'm specifically stuck on await / async / promises and could use some help with the checkout portion
If I need to paste code I will, but mainly I'm looking for something more recent that can help me integrate a simple checkout process
Thanks!
It seems that Meteor has good compatibility with npm packages, so there shouldn't be anything necessary here. It looks like you've also asked over in the Meteor forums so you may get a better & more specific answer there.
I have integrated Stripe into my Meteor app. As previously stated you can use the stripe npm on the server side.
meteor npm install stripe
I tend to have a file somewhere in my project that I initialize my stripe from. eg. /imports/stripe.js:
import { Meteor } from 'meteor/meteor'
import Stripe from 'stripe'
const stripe = new Stripe(Meteor.settings.Stripe.secretKey, {
maxNetworkRetries: 2,
})
export default stripe
Then whenever I need to use the stripe api from my project I can just do:
import stripe from '/imports/stripe'
And to take advantage of checkout.js or other front end integration for the client side if you wish. They tend to be as easy as dropping <script> tag into your project index.html
https://stripe.com/docs/payments/checkout/accept-a-payment#redirect-checkout
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.
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 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