Git Product home page Git Product logo

sourcemaps.io's Introduction

sourcemaps.io deploy & test

A re-write of sourcemap-validator using React, Node, and Google Cloud Functions.

image

sourcemaps.io is a web application that takes a URL for a target transpiled/minified JavaScript file (e.g. https://example.com/js/app.min.js), and verifies:

  • sourceMappingURL or [X-]SourceMap header is present
  • Both the transpiled/minified file and source map file are reachable via HTTP
  • The resolved source map is valid JSON, and parses using Mozilla's source-map library
  • Lines and columns line up as expected
  • ... and more, see tests

Development

Run tests

make test

Run a local server for client (React) development

make client-server

Run a local server for backend development

A local development server will serve the validation function for development.

make backend-server

NOTE: Right now the local server still writes JSON reports to a production Google Cloud Storage bucket. You must have the following shell variables exported (see Deploy to Google Cloud Platform below).

export GCLOUD_PROJECT=myproject-server
export GCLOUD_DATA_BUCKET=myproject-reports
make backend-server

Deploy to Google Cloud Platform

This repository is already configured to automatically deploy to https://sourcemaps.io. But for posterity, this documents how to configure your own Google Cloud deployment environment and how to use the deploy scripts.

Configure your Project

  1. Create a new project in Google Cloud Platform, e.g. myproject
  2. Enable Cloud Functions
  3. Create 3 buckets in Cloud Storage, for:
    1. staging the cloud function (e.g. myproject-server)
    2. storing report data (e.g. myproject-reports)
    3. storing static web content (e.g. myproject-web)

NOTE: Your deployed cloud function must be configured to use Cloud Functions Node 10 runtime (or newer).

Install the gcloud CLI

Follow Google Cloud's instructions for installing the gcloud CLI.

Deploying

First authenticate with Google Cloud Platform:

gcloud auth login

Then initiate the deploy:

# Used for deploy
export GCLOUD_PROJECT=myproject
export GCLOUD_APP_BUCKET=myproject-server
export GCLOUD_DATA_BUCKET=myproject-reports
export GCLOUD_WWW_BUCKET=myproject-web
export GCLOUD_SERVICE_KEY=<base64 encoded service-key json object>

# Used for reporting errors back to your sentry instance:
export REACT_APP_SENTRY_DSN=https://[email protected]/1
export SENTRY_DSN=https://[email protected]/1

# Used for creating a new release in your sentry instance:
export SENTRY_AUTH_TOKEN=sntrys_abcxyz
export SENTRY_CLIENT_PROJECT=MY-PROJECT
export SENTRY_ORG=MY-ORG

make deploy

NOTE: The deploy script will set READ permissions on GCLOUD_DATA_BUCKET and GCLOUD_WWW_BUCKET.

Invoking the Serverless Function

The deployed serverless function is publicly accessible over HTTP. To trigger the function manually, do:

$ curl -X GET "https://${region}-${GCLOUD_PROJECT}.cloudfunctions.net/validateSourceFile?url=http://example.org/static/app.js"

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.