npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

decentraland-gatsby

v6.15.0

Published

Common Gatsby components by Decentraland

Downloads

1,769

Readme

Decentraland Gatsby

Decentraland

Coverage Status

Get started

You can use our project template if you need to create a new repository.

Node 16?

If you are using node 16 you may need to install isomorphic-fetch in order to avoid a ReferenceError: fetch is not defined

  npm install --save isomorphic-fetch
  npm install --save-dev isomorphic-fetch

and imported in your src/server.ts

import 'isomorphic-fetch'

Start project

  npm start

If it's the first time that you run a decentraland-gatsby project you may run it as sudo in order to create https files

Project structure

  src/    ............................... source code
    ┃
    ┣  @types/  ......................... typescript custom types
    ┃
    ┣  migrations/  ..................... migrations
    ┃   ┗ [date]-[migration-name].ts .... files created with `npm run migrate`
    ┃
    ┣  components/  ..................... react components
    ┃
    ┣  hooks/  .......................... react hooks
    ┃
    ┣  entities/  ....................... server side entities
    ┃   ┗ [Entity] ...................... entity name
    ┃       ┣ job.ts .................... background handler (runs periodically without exposing an endpoint)
    ┃       ┣ metrics.ts ................ metrics collectors
    ┃       ┣ middleware.ts ............. connect middleware to reuse
    ┃       ┣ model.ts .................. database model
    ┃       ┣ routes.ts ................. express routes
    ┃       ┣ utils.ts .................. entity helper function (should be front compatible)
    ┃       ┗ types.ts .................. entity types (should be front compatible)
    ┃
    ┣  images/      ..................... render image
    ┃
    ┣  intl/        ..................... language files
    ┃   ┗ [en|es|...].json
    ┃
    ┣  pages/ ........................... route files
    ┃   ┣ 404.tsx     ................... not found page
    ┃   ┣ index.tsx   ................... index page
    ┃   ┣ index.css   ................... index styles
    ┃   ┣ [route].tsx ................... page render component
    ┃   ┗ [route].css ................... page styles
    ┃
    ┣  html.js      ..................... gatsby html template
    ┗  server.ts    ..................... server entry point

  static/ ................ gatsby static files

  .env.example ........... environment variables
  .env.development ....... environment variables for development
  .env.staging ........... environment variables for staging
  .env.production ........ environment variables for production

  .gitlab-ci.yml    ...... CI configuration file

  .eslintrc.js      ...... eslint and plugins config file

  .prettierignore   ...... prettier files
  .prettierrc

  Dockerfile     ......... Docker files
  entrypoint.sh  ......... Bash script executed when the container starts

  gatsby-browser.js  ..... gatsby configuration
  gatsby-config.js
  gatsby-node.js
  gatsby-ssr.js

  tsconfig.json   ........ tsconfig default configuration

Environment variables

# ethereum addresses (separated by ,) that return true
# when you use src/entities/Auth/isAdmin.ts
ADMIN_ADDRESSES=

# infura keys (separated by ,) to create providers
# with src/entities/Blockchain/provider#getProvider
INFURA_KEYS=

# connection string to the database
CONNECTION_STRING=

# token bearer token that protects `/metrics`
PROMETHEUS_BEARER_TOKEN=

# build data, exposed at `/status`
IMAGE=

# default endpoint for utils/api/Catalyst
GATSBY_CATALYST_API=

# default endpoint for utils/api/Land
GATSBY_LAND_API=

# supported chains ids (id user login with other network will app will be prompt to change it, ethereum_mainnet as default)
GATSBY_CHAIN_ID=

# default (ethereum)
# GATSBY_CHAIN_ID=1

# production (ethereum, polygon)
# GATSBY_CHAIN_ID=1,137

# test (sepolia, mumbai)
# GATSBY_CHAIN_ID=11155111,80001

# any
# GATSBY_CHAIN_ID=1,3,4,5,42,137,80001,11155111

Project commands

Development

  npm run migrate create [migration_name]   # create a new migration
  npm run migrate up                        # run all new migrations
  npm run migrate down                      # revert last migration
  npm start        # start the front and the back end development server
  npm run develop  # start the front end development server
  npm run server   # start the back end development server
  npm run format   # apply code formatting
  npm test         # run test

Production

  npm run build       # build end files
  npm run production  # run production server

ESLint and plugins configuration

In order to understand the steps to install ESLint and the plugins needed to order the imports please follow this link