React Starter Kit — New SugarKube!

To learn more about this starter kit and others visit https://sugarkubes.io

Today I’d like to introduce our newest SugarKube.

Jump start your next project with our full stack starter kit!

Video Walkthrough of the app.

Features:

• Authentication: Enterprise-grade passwordless login (Password reset, multi-factor authentication) via Auth0
• File Uploading: Complete file uploading system (s3, wasabi, google cloud)
• API: Complete with user registration, email sending, and some useful CRUD operations.
• Mongoose: Mongoose ORM used for MongoDB. Includes user CRUD.
• MongoDB ready — deploy using Mongo Atlas, compose.io, or Amazon’s Document DB.
• Bloat Free: Build and deploy in minutes not hours.
• Uploading Server: Upload images via Google Drive, Dropbox, Webcam, URL, and Instagram! Using uppy
• Stripe Integration: Start charging quickly with some helper stripe classes on both the front end and back end.
• Analytics: Amplitude and Mixpanel analytics ready
• New User Walkthrough: When a new user signs up you can walk them through several instructions.

Front End

Set up Auth0:

Make sure to fill in the auth0 info and put this in the config.dev.json file in the app repo.

{
  "api": "http://localhost:3001/v1",
  "uploader": "http://localhost:3030",
  "auth0Config": {
    "redirectUrl": "http://localhost:3003/callback",
    "clientId": "your auth0 client id",
    "domain": "your auth0 .auth0.com"
  },
  "stripe": "your stripe api key",
  "billing_plan_id": "if you want stripe enabled, set up a product on stripe and enter the id here",
  "amplitude_token": "your amplitude token",
  "amplitude_prefix": "@app-",
  "checkout_image": "https://s3.us-west-1.wasabisys.com/public.sugarkubes/logo.png"
}

Then simply

npm i && npm run dev

Voila! This starter project includes an enterprise-ready auth system.

Uploader

The uploader is provided by Uppy.io. You can configure google, dropbox, instagram and s3. The uploader api already supports all of these, but you will need to sign up for the apps under your own account to get the api keys and secrets. If you don’t want to enable one or several of them, you can just remove them in the front end

{
  "self": "",
  "uppyOptions": {
    "providerOptions": {
      "google": {
        "key": "",
        "secret": ""
      },
      "dropbox": {
        "key": "",
        "secret": ""
      },
      "instagram": {
        "key": "",
        "secret": ""
      },
      "s3": {
        "key": "",
        "secret": "",
        "bucket": "",
        "region": "",
        "endpoint": ""
      }
    },
    "server": {
      "host": "",
      "protocol": "https",
    },
    "filePath": "./tmp",
    "secret": "",
    "sendSelfEndpoint": "",
    "debug": false,
    "allowedFileTypes": [ "image/png", "video/mp4", "image/jpeg", "image/gif", "video/webm" ]
  },
  "temp_folder": "tmp",
  "port": 3030
}

Once that is in the config.dev.json file, you can run

npm i && npm run dev

You can easily deploy this uploader on Google cloud run and running on Google Storage by building the minio container first. If you’re running on AWS, Azure, or Wasabi, you can skip this container, just build and deploy the Dockerfile, not Dockerfile.minio.

docker build -f Dockerfile.minio -t gcr.io/your-project-id/minio:4-17-19 .

Then deploy with google cloud run. be sure to replace the values in the Dockerfile.minio with the values you want to use

# Dockerfile.minio
from minio/minio
# You need to put your application credentials in this json file
COPY ./my-google-creds.json /credentials.json
ENV GOOGLE_APPLICATION_CREDENTIALS=/credentials.json
ENV MINIO_ACCESS_KEY=xxxxx
ENV MINIO_SECRET_KEY=xxxxxxxx
ENV PORT=9001
ENTRYPOINT minio gateway --address "0.0.0.0:$PORT" gcs <YOUR GOOGLE PROJECT NAME>

Once that’s built and deployed you now have a serverless s3 api and can instantly upload photos with this starter project.

To build the uploader api is a similar process, just make sure the production configs go in config.prod.json. Also go into build_push.sh so it get’s pushed to the correct Google container registry.

./build_push.sh

API

swagger api docs

The api uses koa and authenticates users, has CRUD for users, and a few other schemas as well as a few other utilities for image manipulation. This can be run serverless as well on Google Cloud Run.

The api has several configuration options that also need to be put in config.dev.json

{
  "cert_name": "cert.pem",
  "auth0_domain": "",
  "mixpanel_token": "",
  "redisConfig": {
    "host": "localhost",
    "port": 6379,
    "password": ""
  },
  "self": "http://localhost:3001",
  "api_prefix": "/v1",
  "db": {
    "mongoURL": "mongodb://0.0.0.0:27017/sugarkubes",
    "mongoOptions":  { "useNewUrlParser": true }
  },
  "temp_folder": "tmp",
  "port": 3001,
  "sugarAuth": {
    "username": "basic",
    "password": "auth"
  },
  "sendgrid": "",
  "appURL": "http://localhost:3003",
  "default_from_email": "no-reply@sugarkubes.io",
  "stripe_config": {
    "pub": "",
    "secret": ""
  },
  "s3": {
    "key": "",
    "secret": "",
    "bucket": "",
    "region": "us-west-1",
    "s3ForcePathStyle": "true",
    "signatureVersion": "v4",
    "endpoint": ""
  }
}

Notes:

• Images: Images automatically get thumbnails created for them. this helps dramatically with load times, but you’re welcome to disable it.
• Analytics: The API has support for Mixpanel and Amplitude analytics. You can rip them out or just use one if you’d like.

Conclusion

Thanks for reading! We’re constantly improving the selection of useful container on SugarKubes, so if you see something you need let us know!

While the instructions here are well put together for Google infrastructure, there’s no reason you can’t throw these containers wherever you’d like. For example, you don’t need Minio if you’re running off AWS S3 or wasabi.

Learn more about this and other containers on SugarKubes. Or subscribe for more updates in the future!