Ueno Gatsby Starter

Kick off your project with this opinionated boilerplate. This barebones starter ships with the main Gatsby configuration files you might need.

Quick start

1. Install the Gatsby CLI and create an app.

The Gatsby CLI helps you create new sites using the starter you want

npm install -g gatsby-cli
gatsby new my-app "https://github.com/ueno-llc/ueno-gatsby-starter#master --recursive"

We also published Create Ueno App to easily create projects with different stacks: Gatsby, Next.js, Create React App or React Native, with our config and starters. To create an app using the ueno-gatsby-starter:

npm install -g create-ueno-app
create-ueno-app gatsby my-app

2. Start developing.

Navigate into your new site’s directory and start it up.

cd my-app
gatsby develop

3. Open the source code and start editing!

Your site is now running at http://localhost:8000!

Note: You'll also see a second link: http://localhost:8000___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

Things to know

There are couple of things that are good to know about this starter, compared to the default gatsby starter.

TypeScript

We encourage TypeScript usage and have included basic linting.

• Avoid export default ... - the only place you absolutely need to do this is in ./pages/*. Rather export const Module = ... and import { Module } from './file' (details)

See the TypeScript Handbook for more tips and tricks

SCSS

All .scss and .sass imports will:

• include the classnames package
• output css modules

Take the following code snippet as an example:

import React from 'react';
import s from './my-styles.scss';

export const Button = ({ disabled, children }: { disabled: boolean, children: React.ReactNode }) => (
  <button className={s('button', { disabled })}>{children}</button>
);

SVG

You can import SVG files as React components by placing them in the ./src/assets/svg folder.

Usage:

import React from 'react';
import Logo from 'assets/svg/logo.svg';

export const Header = () => (
  <header>
    <Logo style={{ color: 'blue' }} />
  </header>
);

Deploy