Giter Club home page Giter Club logo

linkifybio's Introduction

linkifybio

Introduction

This is a full stack application that includes a public landing page for your links in bio, and an authenticated console to manage everything about you page.

Infrastructure Stack

This application is meant to run on AWS.

These are the services used to run the application:

  • S3 for static website hosting
  • Lambda for backend APIs (Node.js Express + Dynamoose)
  • DynamoDB for database
  • Cognito for user creations and authentication
  • Cloudfront for CDN
  • Route53 for DNS management
  • SSM Paramstore for secrets (Social Federetion Credentials: ex Google)

Run Application

Prerequisites

localstack

This will install a local environment to run some AWS Services. Specifically we will use S3 and DynamoDB.

brew install localstack/tap/localstack-cli

aws-local

Used to create S3 Bucket for profile images when starting the application.

pip install awscli-local

or if using pip3

pip3 install awscli-local

Local Run Steps

To run this application, first go to director cd ./lambda-api and run:

npm install
npm start:local

This will start the backend on port 3500 and create the s3 bucket for profile images if not already created.

Next, open a new terminal tab, and go to cd ./react and run:

npm install
npm run dev:local

Next, open http://localhost:5173 in your browser and use the application.

Note

Authentication is disabled for local development.

If you would like to connect to our actual backend, you can do so by running:

npm run dev

This will connect to the lambda in AWS and will require Cognito for authentication.

Deploy to AWS

The whole infrastructure is located in the terraform folder.

Important

The backend in Terraform expects that you use a valid domain name from Route 53. If you rather not use a domain, you will need to remove references from Terraform to not use a Route53 record, and cloudfront.

You will need to change the following local variables to use your own domain in vars.tf.

locals {
  domain_name = "YOUR_DOMAIN_NAME"
}

If you have not configured an OIDC role for GitHub Actions, you can do so by enabling the following flag in the oidc.tf github-actions-oidc module.

create_oidc_provider = true

If you already created it, set the value to false

Once you deploy this, in react app .env files, update the VITE_API_URL to your lambda API url. Then, you can use GitHub Actions to build and deploy your application.

In GitHub actions secrets and variables, set a new repository variable AWS_ACCOUNT_ID with the AWS account ID that you want to deploy into.

Next, in the on_release.yaml workflow under .github/, update the linkifybio references to your domain name used in terraform. This will ensure that you can deploy to your already created resources in terraform.

In the react app, there are references to linkifybio.com / linkifybio that are used for Cognito redirects and branding purposes. I recommend searching for this keyword and changing any references to your domain name throughout the app.

Push your changes, and wait for the workflow to run and deploy your application.

If you have any problems, please open an issue and I will try to answer as soon as possible!

Enjoy!

linkifybio's People

Contributors

michael-ortiz avatar hnucamendi avatar

Stargazers

 avatar Carlos Peralta avatar  avatar

Watchers

 avatar  avatar

linkifybio's Issues

Update Lambda API Node Version

Currently the version of the API Lambda is node 16 here. Goal of this issue is to update it to the latest LTS version - currently Node 20 as of 04/19/2024

Cleanup README

The README has some typos and seems to assume what package manager you are using, for example.

To make this more accessible to various contributors with various OS and systems, I think we should be more general in the instructions.

Create React App is deprecated

noticed you used Create React app(CRA), and wanted to point out that CRA was deprecated in 2023 due to it being incompatible with new tooling & slow as it relied on webpack.

Here are some articles on the matter:

  1. https://dev.to/ag2byte/create-react-app-is-officially-dead-h7o
  2. https://www.theodinproject.com/lessons/node-path-react-new-setting-up-a-react-environment
  3. https://dev.to/clumsycoder/is-create-react-app-really-dead-what-are-other-options-1j39

The recommendation I have seen most popular is Vite, I have personally used vite, and it is super similar to CRA + it comes with some really nice features out of the box like env vars and modes.

That being said, you might also be interested in Svelte. I dont know much about Svelte but I have heard its the leading tech in web apps. Of course you dont want to just join the hypetrain, but something to consider.

I dont mind helping out with a migration from CRA to Vite or some other tooling for React and or Svelte, but just wanted to let you know!

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.