I've setup a React Amplify project. I have successfully got Auth working using Cognito User Pools but can't seem to figure out DataStore/API.
I currently use DataStore to save data locally but it doesn't seem to update in the backend. I do have the aws_appsync_graphqlEndpoint in the aws-exports.js.
Not sure how to enable the Sync Engine in this guide.
You must import Amplify from #aws-amplify/core and NOT from aws-amplify
The following code example worked well in App.js, at the BOTTOM of all your imports:
import Amplify from "#aws-amplify/core";
import { DataStore, Predicates } from "#aws-amplify/datastore";
import { Post, PostStatus } from "./models";
//Use next two lines only if syncing with the cloud
import awsconfig from "./aws-exports";
Amplify.configure(awsconfig);
Source: https://docs.amplify.aws/lib/datastore/examples/q/platform/js
You can use DataStore.query to query the data.
DataStore.save to save the record etc.
Below example should be good starting point.
https://github.com/dabit3/amplify-datastore-example
If I understand the question correctly everything is set up with DataStore and working locally. The problem is that it doesn't sync to the cloud. One of the answers suggested using Apollo. You don't need Apollo. By default, and the suggested development mode of using DataStore, is local only. When you are ready to deploy to the cloud you use the command
amplify push
which provisions all of your cloud resources for the app. For more details refer to DataStore docs.
Related
I am trying to tie my react app to firebase,
I understand the general idea behind but the it seems like there are few different binding
options depending on how much you want get into functionality of firebase.
0.0 basically without registering a firebase app in the project to my react app and using any service lets say from authentication or database. Ive been able to use make POST and GET request as well as sign up and in users without regiestering an app from firebase website.
just have to use the end points given by the service you wish to use.
1.0 I guess this is the more proper way which registering a firebase app to my react app
either by using npm or script/cdn. I am new to firebase so i did not know that i had to do this.
2.0 basically the same step as 1.0 but also initializing/configuring firebase app(?) with Firebase CLI which creates things like
A firebase.json configuration file that lists your project configuration.
A .firebaserc file that stores your project aliases.
this is now where i get confused as to how to go about combiniing with my react app.
for example, locally, react app is running on port 3000 but when i use CLI's firebase emulators: start script, what will happen to my react app which is running on 3000.
How do you guys set this up correctly? i guess it depend on how much backend i want to use but what i need firebase for mostly is to use authentication and database...
I have built this website using reactjs, firebase. I would like to know if someone wants to contribute to this project how should he/she get the data that is stored in my firebase account for the development of the website? https://www.codingspace.codes/
I know they need to create a new firebase project but how do they get the exact data that is on my website.
I don’t have any idea, anyone please help me with this.
This is a very open-ended question, typically though if it's for local development I'd just give them access to the firebase project as a collaborating member.
Alternatively, you could be looking into the import/export features of Firebase.
Use the firestore export command to export all the documents in your database, replacing [BUCKET_NAME] with the name of your Cloud Storage bucket. Add the --async flag to prevent the gcloud tool from waiting for the operation to complete.
gcloud firestore export gs://[BUCKET_NAME]
And importing it on their project in a similar manner:
Use the firestore import command to import documents from a previous export operation.
gcloud firestore import gs://[BUCKET_NAME]/[EXPORT_PREFIX]/
where [BUCKET_NAME] and [EXPORT_PREFIX] point to the location of your export files.
See the documentation for further details https://firebase.google.com/docs/firestore/manage-data/export-import
I am building a full stack MERN (MongoDB Express React Nodejs) application. I am using the NPM package Google Maps React to display google maps on my website. I am having difficulty coming up with a strategy to secure my front end google maps API key.
In order to fully understand my problem it may be helpful to review the Google Maps React component code below
import {Map, GoogleApiWrapper} from 'google-maps-react';
export class MapContainer extends Component {
render() {
return (
<Map google={this.props.google} >
</Map>
);
}
}
export default GoogleApiWrapper({
apiKey: (YOUR_GOOGLE_API_KEY_GOES_HERE)
})(MapContainer)
Possible Solutions
Solution A
Store key in my Mongo database
make GET request to database to obtain the google Maps API key
put API key data string in google maps component
Solution B
note: I did some deep digging to the the Google Maps React Node module files. I found .env and .env.example files with in the google maps react node module files. The .env.example file says GAPI_KEY=FILL_IN_YOUR_KEY_HERE
store api key in google maps react node module files
Concerns with solution A
Possible solution is not secure
API key data can be accessed by user
Concerns with solution B
the node modules are part of my .gitignore file and therefore the google maps API key will not be available when the app is deployed
Thank you for your thoughts and time.
PS I used create-react-app
You have various options to securely store an api key. If you are using CircleCi for continuous builds, you can create an environment key. Check your build solution for something similar.
There are also alternatives for encrypting files such as git-secret. That way you could use an environment config file.
Bottom line do not store keys in code or in config files unless you have it encrypted.
I'm having problems with accessing Express endpoints on Firebase hosting when using a Create React App production build.
The only change I made to firebase.json was switching from the default public folder to create-react-app/build.
When I go to example.com/test in browser, using Create React App in production, it just redirects me back to index, but using a separate REST client I'm still able to access that endpoint.
If I switch back to the default public folder in firebase.json and deploy to production, accessing this endpoint from the browser still works as well, but I no longer have Create React App of course.
What is happening here? Any help is appreciated.
UPDATE: It has something to do with service workers. I was able to find a temporary workaround by commenting out:
import registerServiceWorker from './registerServiceWorker';
and
registerServiceWorker();
from src/index.js.
Then I went to Chrome developer tools and "unregistered" the service worker from the Application menu.
Now I'm wondering how to correctly implement service workers.
It may be happen, because when you done firebase init, last question from console was something like - make a single page app (redirect all URL to index.html).
So what you can do, is to tun firebase init again, and select in this option NO.
And make deploy again.
I am trying to use Google Objectify for Datastore (https://github.com/objectify/objectify). My app is not hosted on GAE, but I still make use of Datastore, so I need to use the remote API. Right now, I use the low level API and connect successfully like this :
DatastoreOptions options = DatastoreOptions.builder()
.projectId("PROJECT_NAME")
.authCredentials(AuthCredentials.createApplicationDefaults()).build();
Datastore client = options.service();
And the library used is http://googlecloudplatform.github.io/gcloud-java/0.2.0/index.html. My application defaults for "AuthCredentials.createApplicationDefaults()" is in my home folder in development as well as on the server.
In the doc I saw for Objectify, I did not see anyway of specifying the connection like above, thus no way of telling to use the credentials file in our home folder. The code I see for Objectify is mostly like this Objectify.ofy(). So I see no way with this method of telling to use the auth credentials defaults.
Thank you very much.
Use the Google App Engine remote api:
https://cloud.google.com/appengine/docs/java/tools/remoteapi
You could try gcloud-java datastore module.
http://googlecloudplatform.github.io/gcloud-java/0.2.0/index.html
But I encounter some performance issues on outside of Google Sandbox (GAE-Compute Engine)