Giter VIP home page Giter VIP logo

10309-technology-research-jsreport's Introduction

Technology Research Serverless JSReport

Summary

Backend

  • GET /api/data which will return sample data from Google Sheets through the Google APIs
  • POST /api/report which will run JSreport as a serverless function

Took inspiration from this article.

Both endpoints

Frontend

A simple frontend client for the backend, built with React and Parcel Bundler.

Intial Setup

Create an S3 bucket to host the front end

  • create an S3 bucket and configure it for website hosting
    • name it the same as the domain you'll use for its cloudfront distribution in Route 53
    • index.html should map as default success and error page
  • create a Cloufront distribution and take the S3 created above as origin
    • configure it as http redirecting to https
    • default root object should be index.html
  • create a Route 53 recordset pointing to the Cloudfront distribution

More details in the process on this article.

Create a Cognito User Pool

  • Create a Cognito User Pool and
    • On that user pool create 2 app clients
      • one for local development, the callback and logout urls http://localhost:3000
      • the other for production , the callback and logout urls are the ones sets in the Route 53 entry created in before

Get a Google Service Account key with access to Google Sheets

  • Create a Project in Google Cloud's Web Console
  • Enable the following APIs for the google cloud project
  • Select the Google Cloud Project in the Google Cloud Dashboard
  • Create a Service Account (From now on called google service account)
    • Create a key (Look for the "CREATE KEY" button in the view page of the Service Account just created)
    • Download the Credentials as JSON file
    • Store it in your local project's folder as backend/google.json
  • Share the sheet with the email of the Service Account

Install locally

Install dependencies and run

  • cd frontend
    • cp .env.example .env.local (and edit .env.local with the proper values)
    • npm install
    • npm start
  • cd backend
    • cp .env.example .env (and edit .env with the proper values)
    • npm install
    • unzip backend/layer/googleapis.zip in backend/layer/googleapis/
    • unzip backend/layer/jsreports.zip in backend/layer/jsreports/
    • npm run-script dev

Build & Deploy

Backend

  • Deploy the serverless app with AWS_PROFILE=architecture dotenv -e .env.production -- serverless deploy --stage dev
    • copy the base url of your functions
    • set this url as backend url in the production .env of the frontend

Front end

  • rm -rf dist/* && NODE_ENV=production parcel build index.html
  • aws s3 sync dist/ s3://{{the url of your route 53 record}} --delete (replace the value among brackets for the real one)
  • invalidate the cloudfront distribution

10309-technology-research-jsreport's People

Contributors

fmquaglia avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.