deploying an angular app on aws cloudfront - javascript

I have a laravel php app which is basically an api that the user will access through an angular single page app. Currently the angular app is contained with the public folder but I want to break it off on its own so that I can deploy it via amazon cloudfront.
I found this article for hosting static websites on CloudFront which explains the basics but I cannot find anything that discusses the hitting of an api with your cdn served site.
I would like to still be able to have 3 different environments, dev/staging and production which each currently have their own elastic beanstalk managed instances and seperate databases. I would like their addresses to be dev.blah.com / staging.blah.com and blah.com respectively and have each version of the angular app hit the correct backend etc.
I would like to be able to deploy the angular app in a similar way to how I deploy to elastic beanstalk, ie git push
Can I set it up so I dont need to modify the api endpoints in the angular app for each environment. ie the dev version hits dev.blah.com/get/user/1 and with the same source the staging hits staging.blah.com/get/user/1? Will this happen automatically or do I need to take specific actions to allow for this?
Are all these things possible? I dont expect a step by step guide but just looking for an outline of the process and a push towards where I can find the resources to learn how to do this myself as my searches have not resulted in much

On CloudFront, in the "behaviors" tab of your distribution, you can assign a path to every origin. For example, you can specify that /* requests are redirected to a S3 bucket with your static resources but /api/* is redirected to your api backend.
As for the dev/staging/prod environments, those would probably be 3 different distributions too. They can point to the same or to different origins.
See "Whole Site Delivery with CloudFront"

Related

How to get the latest cms posts data in a gatsby built project?

I've build a static website with gatsby and it workes fine . The problem is When I change the posts title and body in contentful cms and refresh the website it doesn't fetch the latest updated version of posts.
How can I always get the latest posts from a cms like contentful ? Do I have to rebuild the whole project and then redeploy the built files to hosting service everytime there is an update in cms posts ?
Yes, Gatsby is a static site generator so you have to rebuild after changes in your CMS. Where are you hosting? Netlify is a hosting platform that does this for you automatically.
As it has been said, Gatsby is a static site generator and it needs to re-fetch the data in the build time, so you'll need to redeploy the site. There's an automated way, however, to achieve this, called webhook.
A webhook is a way for an application to notify another application when a new event has occurred in real-time. In your case, once your data has been updated, deleted, or created, the webhook will trigger into the server the new deploy.
Depending on your host, the webhook is automatically set (like Netlify, because every change is a branch that is merged in a pull-request once the deploy occurs) or needs to be built from scratch.

Google APIs - removing auth scope

I'm changing scopes in an app for Google Classroom. I remove from courses .readonly and added student listing
var SCOPES = "https://www.googleapis.com/auth/classroom.courses https://www.googleapis.com/auth/classroom.coursework.students";
I get this error when requesting students even after logging out and attempting to re-authenticate:
Request had insufficient authentication scopes
It seems the token has been cached somewhere.
This Github issue, although for Google Sheets, says the token is in Documents/.credentials/ folder. I don't have this folder though on my Macbook Pro Sierra 10.12.6.
Where can I find that folder and remove the saved scopes so it reauthenticates and accepts my new scopes?
If you change the scopes needed in your application then the user will need to authenticate your application. especially if you go from a read-only scope to a read write scope. This is because you need additional permissions then what you had originally requested. List of google classroom scopes
Assuming that you are using the Google .net client library then you can find the user credentials in the %appdata% folder on your machine. By deleting that fine you can force a authentication. I am guessing that you are since this is the github project you have linked to.
Note: there should be a way of forcing reauth via code but i cant remember the command right now i will have to look it up.

Prevent users from seeing Meteor client script by role

In Meteor we put all sensitive code in /server and browser code in /client. Meteor then automatically compiles and minifies all /client side code for us. Thanks Meteor.
However, I'm using https://github.com/alanning/meteor-roles to manage content by user roles. One of those roles is an administrator and I have a client side scripts for use only by that user eg: /client/admin-only/**.js. All code in those scripts checks the user is an administrator and only calls the server to do sensitive tasks, but I don't want anyone but an adminstrator to be able to even see that code.
What I want to ensure is that these client admin JS files are only downloaded to users who are actual administrators and not included in the auto-compiled/minified JS created by Meteor.
Is there any way to setup Meteor to generate 2 versions of it's client JS - One for normal users and one for administrators - and only download those files based on user role?
The Meteor Guide addresses this issue:
While the client-side code of your application is necessarily accessible by the browser, every application will have some secret code on the server that you don’t want to share with the world. Secret business logic in your app should be located in code that is only loaded on the server. This means it is in a server/ directory of your app, in a package that is only included on the server, or in a file inside a package that was loaded only on the server.
Basically, MDG's guidance is to dumb down that admin view as much as possible. If that's not acceptable, you'll need to have it bundled in a separate Meteor application on either an internally accessible network only, or by using two MongoDB instances so you can separate authentication out for the second app.

Sharing session between two node apps using SSO

I have an existing website which is built using express and node.js , I have to incorporate nodebb forum in that website which is again a different node application, I am using facebook login for both of them but I have to login into them seperately one by one(using same facebook app for both). What I want to do is,
1.Login via fb or any sso in the main site and the user should be logged in the forum via the same automatically.
2.How can I integrate nodebb in my website so that the look and feel doesn't change, it looks like I am on a completely different website, just need some tips to integrate nodebb in my existing website.
How can I achieve these two?
(Hey there #Vipul, NodeBB dev here) When you establish the express session your app, what are you setting the cookie's domain to?
;domain=domain (e.g., 'example.com', '.example.com' (includes all subdomains), 'subdomain.example.com') If not specified, defaults to the host portion of the current document location.
-- MDN
You'll probably want to set it to .your-domain.com, and likewise for NodeBB (do it in the "Settings/Advanced" section):
Then also make sure the key in your app is set to express.sid, which is the value we use, and that the secrets match.

fetch public tweets via twitter api 1.1, via client side code (js)

I'm working on a basic personal homepage, consists of a single html document, a .css and jquery*.js file. I want to create a blog-ish look via fetching page content from tweets. The standart widget doesn't fit to the look of the page.
I can fetch public tweets from any account with no authentication crap (it's crap because it public data anyway) via API v1. But with API v1.1, it returns authentication error. It wants me to authenticate to fetch public data. Try to navigate this url. it shows ({"errors":[{"message":"Bad Authentication data","code":215}]});.
My question is is there a way to fetch public tweets via client side js? I don't want to create an app to just fetch public data. I don't wan't to use identi.ca or else, but Twitter pushes me to do.
Upon the comment of Zachary Kinebel to Norguard's answer, I thought, as a comment of Norguard's might be helpful to others, I should put it here:
/search.json?q=from:nerdswguitars === recent tweets by NerdsWGuitars /search.json?q=to:nerdswguitars === recent tweets to NerdsWGuitars /search.json?q=from:nerdswguitars OR to:nerdswguitars === both. /search.json?q=#nerdswguitars === posts involving NerdsWGuitars. /search.json?q=#nerdswithguitars === posts trending "nerdswithguitars". But you MUST make sure that you're properly URL encoding the query. Read more here: https://dev.twitter.com/docs/using-search and if you can't find what it is that you're looking for, out of this, then you need to be a lot more specific
EDIT
In the wonderful world of bad ideas, Twitter is sunsetting this answer, as of May 2013, and will require, at minimum, that you either use one of their widgets, and shoehorn it in, or that you set up an application and do application-level authentication, even for public-timeline GET requests.
If they change their mind, or delay the throwing of the switch, this will at least continue to be here.
Use the Search API:
"http://search.twitter.com/search.json?q=nerdswguitars"
You can use the URL-encoded # or # in front of search terms. You can also use keywords like from or to, and specify limits, et cetera.
You can use Mooch, a small application designed to solve this exact problem. Setting up a new Mooch service is very simple, and utilizes Heroku. The
deployment process requires the Heroku Toolbelt application.
Step 1: Create a Twitter app
Visit https://dev.twitter.com/.
Sign in with a Twitter account.
Create a new application.
Step 2: Get Mooch
Clone the Git repository (git clone git#github.com:eloquent/mooch.git).
Change into the Mooch root directory.
Step 3: Create a Heroku app
Sign in with Heroku Toolbelt (heroku login).
Create a new app with heroku create.
Step 4: Configuration
Mooch authenticates requests to the Twitter API using the application-only
authentication method. This requires the consumer key and secret from the
Twitter application created in step 1.
Example authentication configuration
heroku config:set MOOCH_CONSUMER_KEY=xvz1evFS4wEEPTGEFPHBog
heroku config:set MOOCH_CONSUMER_SECRET=L8qq9PZyRg6ieKGEKhZolGC0vJWLw8iEJ88DRdyOg
Step 5: Deploy
git push heroku master
The new Mooch service should now be ready for use. Check the Heroku
dashboard for the service's location.
For more detailed configuration instructions, a demo application and more, check out the Mooch README on GitHub.

Categories

Resources