GithubHelp home page GithubHelp logo

tchigher / short Goto Github PK

View Code? Open in Web Editor NEW

This project forked from short-d/short

0.0 0.0 0.0 5.47 MB

URL shortening service written in Go and React

Home Page: https://short-d.com

License: MIT License

Go 62.91% HTML 1.97% CSS 8.02% JavaScript 4.44% TypeScript 16.91% Shell 5.45% Dockerfile 0.29%

short's Introduction

Short

Build Status codecov Maintainability Go Report Card Open Source Love

Demo

Preview

Demo

Get s/ Chrome extension

Install it from Chrome Web Store or build it from source

Getting Started

Accessing the source code

git clone https://github.com/byliuyang/short.git

Prerequisites

  • Docker v19.03.2

Configure environmental variables

  1. Create .env file at project root with the following content:

    DOCKERHUB_USERNAME=local
    DB_USER=your_db_user
    DB_PASSWORD=your_db_password
    DB_NAME=your_db_name
    RECAPTCHA_SECRET=your_recaptcha_secret
    GITHUB_CLIENT_ID=your_Github_client_id
    GITHUB_CLIENT_SECRET= your_Github_client_secret
    JWT_SECRET= your_JWT_secret
    WEB_FRONTEND_URL=http://localhost:3000
    WEB_PORT=3000
    HTTP_API_PORT=80
    GRAPHQL_API_PORT=8080
  2. Update DB_USER, DB_PASSWORD, DB_NAME, and JWT_SECRET with your own configurations.

Create reCAPTCHA account

  1. Sign up at ReCAPTCHA with the following configurations:

    Field Value
    Label Short
    reCAPTCHA type reCAPTCHAv3
    Domains localhost
  2. Replace the value of RECAPTCHA_SECRET in the .env file with SECRET KEY.

  3. Replace the value of REACT_APP_RECAPTCHA_SITE_KEY in frontend/.env.development file with SITE_KEY.

Create Github OAuth Application

  1. Create a new OAuth app at Github Developers with the following configurations:

    Field Value
    Application Name Short
    Homepage URL http://localhost
    Application description URL shortening service written in Go and React
    Authorization callback URL http://localhost/oauth/github/sign-in/callback
  2. Replace the value of GITHUB_CLIENT_ID in the .env file with Client ID.

  3. Replace the value of GITHUB_CLIENT_SECRET in the .env file with Client Secret.

Generate static assets

Run the following commands at project root:

docker build -t frontend-build -f Dockerfile-build .
docker run -v $(pwd)/frontend/build:/app/build frontend-build:latest

Build frontend & backend docker images

docker build -t short-frontend:latest -f frontend/Dockerfile frontend
docker build -t short-backend:latest -f backend/Dockerfile backend

Launch App

docker-compose up

Visit http://localhost:3000

Development

Dependencies

  • Go v1.13.1
  • Node.js v12.12.0
  • Yarn v1.19.1
  • Postgresql v12.0 ( or use ElephantSQL instead )

Backend

  1. Create .env under backend directory with the following content:

    DB_HOST=your_db_host
    DB_PORT=your_db_port
    DB_USER=your_db_user
    DB_PASSWORD=your_db_password
    DB_NAME=your_db_name
    RECAPTCHA_SECRET=your_recaptcha_secret
    GITHUB_CLIENT_ID=your_Github_client_id
    GITHUB_CLIENT_SECRET=your_Github_client_secret
    JWT_SECRET=your_JWT_secret
    WEB_FRONTEND_URL=http://localhost:3000
  2. Update DB_HOST, DB_PORT, DB_USER, DB_PASSWORD, DB_NAME, RECAPTCHA_SECRET, GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET, JWT_SECRET with your own configurations.

  3. Launch backend server

    cd backend
    ./scripts/dev

Frontend

Remember to update REACT_APP_RECAPTCHA_SITE_KEY in frontend/.env.development.

  1. Launch frontend server

    cd frontend
    ./scripts/dev
  2. Visit http://localhost:3000

System Design

Database Modeling

Entity Relation Diagram

Deployment

Merging from master branch to production branch on Github will automatically deploy the latest code to the production server. This is called continuous delivery in the DevOps world.

Continuous Delivery

In the future, when there are enough automated tests, we may migrate to continuous deployment instead.

Continuous Deployment

Tools We Use

Contributing

When contributing to this repository, please first discuss the change you wish to make via issues with the owner of this repository before making a change.

Pull Request Process

  1. Update the README.md with details of changes to the interface, this includes new environment variables, exposed ports, useful file locations and container parameters.
  2. You may merge the Pull Request in once you have the sign-off of code owner, or if you do not have permission to do that, you may request the code owner to merge it for you.

Code of Conduct

  • Using welcoming and inclusive language
  • Being respectful of differing viewpoints and experiences
  • Gracefully accepting constructive criticism
  • Focusing on what is best for the community
  • Showing empathy towards other community members

Discussions

Please join this Slack channel to discuss bugs, dev environment setup, tooling, and coding best practices.

Author

Harry Liu - Initial work - byliuyang

License

This project is maintained under MIT license

short's People

Contributors

akrifari avatar coderworld10 avatar dedifferentiator avatar dependabot[bot] avatar kamalashreen avatar richardbertozzo avatar shade34321 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.