Cheap front-end only Galaxy option?

deployment
1

Meteor is a great tool for bundeling and deploying not only web apps but also websites. Especially react. I find it much simpler to setup and run a react front-end app with meteor than with create-react-app.

I often deploy meteor front-end only sites to S3 for sites that only talks to APIs. However I often find it time consuming to run though / maintain aws configs for doing this.

I really think there must be a large market of web sites that does not require a backend, infact most websites.

On the other hand, Galaxy is amazing and simple to setup, maintain versions etc. but the minimum deployment is too expensive for these static deployments. Why not have a $3/$5 pm option for front-end only sites? Meteor is attractive for more advanced web designers especially with bundle visualizer and dynamic imports.

3

Any pointers on this?

I currently use Gatsby for static sites and while it has much to recommend it - build, prefetch, plugins - I’d much prefer Meteor for this as it would offer more runway for later development

4

Here is my reference readme for it… Its very shorthand, but should hint you in the right direction.
I usually spend about 20min to get a site up which sucks. Recently update to react 16 and meteor 1.6 caused my Less styles not to compile on deployment, which is genuinely annoying!!

Thus this post, and thus me searching for easier methods. Also think meteor-deploy-s3 is not actively maintained.

I just tried https://medium.com/@purplecones/deploying-a-meteor-app-for-free-using-zeit-now-c183329057c9 - and its great and no problems this far. Custom domain also easy.
However, after a while Zeit freezes the instance which means it can take a while to come alive unless you dedicate an instance (by now scale <url> 1 ), which is not that bad since the premium package is cheap. Zeit is impressive though! Not sure if I made a mistake when checking, but with meteor-now the browser loads 500kb, compared to 1.3Mb on the S3 deployment - why?

Here the readme.

S3 Setup Instructions

Deploy a new React Meteor App to S3 by following these steps:

Create deploy.json in project root

{
  "accessKeyId": "xxx",
  "secretAccessKey": "xxx",
  "bucket": "www.mysite.com",
  "region": "us-east-1"
}

S3 Setup

  1. Create a new S3 bucket with www.mysite.com name, set the permissions to be visible to public and region to US (Virginia) - us-east-1, make it a Static website hosting bucket and set Index document: index.html - same as main meteor html file.
  2. Go to AWS IAM and under policies, edit my-own-iam policy:
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "uniquexxx",
            "Effect": "Allow",
            "Action": [
                "s3:*"
            ],
            "Resource": [
                "arn:aws:s3:::www.mysite.com",
                "arn:aws:s3:::www.mysite.com/*"
            ]
        }
    ]
}

Deploy

  1. Install https://www.npmjs.com/package/meteor-deploy-s3.
  2. Deploy using npm run production-deploy.
  3. Your app is now live under the bucket url.

Setup ww.mysite.com to point to S3

configure an ssl (https://www.h3xed.com/web-development/using-https-with-amazon-s3-and-your-domain )

AWS Cloudfront Setup

  1. Go to AWS CF and create a new distribution, set the follow (This takes a few minutes to deploy):
  • Origin Domain Name: www.mysite.com => S3 bucket
  • Viewer Protocol Policy: HTTP redirect to HTTPS
  • Alternate Domain Names (CNAMEs): www.mysite.com
  • Default Root Object: index.html
  • SSL Certificate: Custom SSL Certificate => *.mysite.com
  • Restrict Bucket Access: Yes
  • Origin Access Identity: Create a New Identity => access-identity-www.mysite.com.s3.amazonaws.com
  • Grant Read Permissions on Bucket: Yes, Update Bucket Policy
  1. Copy the CF domain name give by AWS.

AWS Route 53 Setup

  1. Go the AWS Route 53, edit the www.mysite.com domain.
  2. Add a CNAME record with name www.mysite.com and value = the CF domain name. Set TTL to 60.

React Router and Cloudfront

In order to redirect the routes of react router to the app route, we need to specify an error page redirect in CF. When configuring the CF distribution, go to the error pages tab and create the following:

  • HTTP Error Code: 403
  • Customize Error Response: Yes
  • Response Page Path: /index.html
  • HTTP Response Code: 200

You can also do the same for undefined routes 404, and setup react router to catch these unmatched routes.

Cloudfront Cacheing

CF takes a few minutes to propagate changes to all regions / edges of the CDN. When not checking if updates is valid, website hosting on the bucket should be disabled in S3 to force all access though SSL on CF.

If changes are made which must propagate immediately, an invalidation request can be created on CF distribution to update all file cache in cloud. Go to the CF distribution configuration and select the invalidations tab, and create a invalidation.

3 Likes
5

We looked at the s3 bucket route but Netlify is so much more simple and feature rich.

Netlify is an ultra performant platform for static sites.
Features include

  • Global CDN
  • Ultra Fast DNS
  • High Availability
  • Atomic Deploys
  • Instant Cache Invalidation
  • Security
  • Scalability
  • Automation

Oh did I mention free one-click SSL, form submission hooks and GitHub integration?

It’s free and nothing is faster. For React you could built it with Gatsbyjs.

Here’s an example of a site we built with React-Semantic_UI + Gatsbyjs + Contentful, hosting on Netlify.

2 Likes
6

So kind - thank you!

I only know the basics of S3/lambda, but will dive in now.
Cloudformation looks like it might ease the management of all that. https://aws.amazon.com/cloudformation

@maxhodges - Thanks…yes - Gatsby/Netlify is a superb combo