A "link in bio" site built using the "T3" tech stack.

Overview

Create T3 App

This is an app bootstrapped according to the init.tips stack, also known as the T3-Stack.

Why are there .js files in here?

As per T3-Axiom #3, we believe take typesafety as a first class citizen. Unfortunately, not all frameworks and plugins support TypeScript which means some of the configuration files have to be .js files.

We try to emphasize that these files are javascript for a reason, by explicitly declaring its type (cjs or mjs) depending on what's supported by the library it is used by. Also, all the js files in this project are still typechecked using a @ts-check comment at the top.

What's next? How do I make an app with this?

We try to keep this project as simple as possible, so you can start with the most basic configuration and then move on to more advanced configuration.

If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our Discord and ask for help.

How do I deploy this?

Vercel

We recommend deploying to Vercel. It makes it super easy to deploy NextJs apps.

  • Push your code to a GitHub repository.
  • Go to Vercel and sign up with GitHub.
  • Create a Project and import the repository you pushed your code to.
  • Add your environment variables.
  • Click Deploy
  • Now whenever you push a change to your repository, Vercel will automatically redeploy your website!

Docker

You can also dockerize this stack and deploy a container.

  1. In your next.config.mjs, add the output: "standalone" option to your config.

  2. Create a .dockerignore file with the following contents:

    .dockerignore
    Dockerfile
    .dockerignore
    node_modules
    npm-debug.log
    README.md
    .next
    .git
    
  1. Create a Dockerfile with the following contents:

    Dockerfile
    # Install dependencies only when needed
    FROM node:16-alpine AS deps
    # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
    RUN apk add --no-cache libc6-compat
    WORKDIR /app
    
    # Install dependencies based on the preferred package manager
    COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
    RUN \
       if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
       elif [ -f package-lock.json ]; then npm ci; \
       elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i; \
       else echo "Lockfile not found." && exit 1; \
       fi
    
    
    # Rebuild the source code only when needed
    FROM node:16-alpine AS builder
    WORKDIR /app
    COPY --from=deps /app/node_modules ./node_modules
    COPY . .
    
    # Next.js collects completely anonymous telemetry data about general usage.
    # Learn more here: https://nextjs.org/telemetry
    # Uncomment the following line in case you want to disable telemetry during the build.
    # ENV NEXT_TELEMETRY_DISABLED 1
    
    RUN yarn build
    
    # If using npm comment out above and use below instead
    # RUN npm run build
    
    # Production image, copy all the files and run next
    FROM node:16-alpine AS runner
    WORKDIR /app
    
    ENV NODE_ENV production
    # Uncomment the following line in case you want to disable telemetry during runtime.
    # ENV NEXT_TELEMETRY_DISABLED 1
    
    RUN addgroup --system --gid 1001 nodejs
    RUN adduser --system --uid 1001 nextjs
    
    # You only need to copy next.config.js if you are NOT using the default configuration
    # COPY --from=builder /app/next.config.js ./
    COPY --from=builder /app/public ./public
    COPY --from=builder /app/package.json ./package.json
    
    # Automatically leverage output traces to reduce image size
    # https://nextjs.org/docs/advanced-features/output-file-tracing
    COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
    COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
    
    USER nextjs
    
    EXPOSE 3000
    
    ENV PORT 3000
    
    CMD ["node", "server.js"]
  1. You can now build an image to deploy yourself, or use a PaaS such as Railway's automated Dockerfile deployments to deploy your app.

Useful resources

Here are some resources that we commonly refer to:

You might also like...

Different Types of Monsters Card of Popular anime. Build in React tech.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Mar 19, 2022

Blog-webapp - A simple webapp prototype that serves tech news, blogs, and anything else a developer might want to learn or get help with

Blog-webapp - A simple webapp prototype that serves tech news, blogs, and anything else a developer might want to learn or get help with

Blog Web app A simple webapp prototype that serves tech news, blogs, and anythin

Jul 9, 2022

Desafio Gerador de senhas com Emojis - Tech da Semana 馃榿 馃ぉ

 Desafio Gerador de senhas com Emojis - Tech da Semana 馃榿 馃ぉ

Desafio Gerador de senhas com Emojis - Tech da Semana 馃榿 馃ぉ 馃摎 Informa莽玫es sobre o projeto O projeto foi desenvolvido com base no desafio do Discord d

May 26, 2022

Primeiro projeto do M贸dulo 1 da Blue ed Tech - Web Fullstack

Primeiro projeto do M贸dulo 1 da Blue ed Tech - Web Fullstack

Projeto1-Modulo1-BlueFullstack M贸dulo 1 - Blue ed Tech - Web Fullstack Projeto 1 - A Jornada do Her贸i A premissa 茅 a seguinte: O nosso her贸i chegou ao

Mar 9, 2022

The first place winning no-code platform for generating developer resume pages, designed for and submitted to the 2022 Tech Optimum Hackathon.

Genfolio Genfolio is a no-code platform for generating developer portfolios. A demo can be found on the project's devpost or on youtube. Our stack We

Jul 18, 2022

Integration with https://neon.tech Serverless Postgres

README Welcome to RedwoodJS! Prerequisites Redwood requires Node.js (=14.19.x =16.x) and Yarn (=1.15) Are you on Windows? For best results, follow

Sep 7, 2022

Triumph Tech鈥檚 Magnus Editor is a full-featured remote editor for Rock RMS.

Triumph Tech鈥檚 Magnus Editor is a full-featured remote editor for Rock RMS.

Magnus Visual Studio Code Editor for Rock RMS Triumph Tech鈥檚 Magnus Editor is a full-featured remote editor for Rock RMS. Rock RMS is an open source R

Sep 21, 2022

Online Inventory Control System for an apparel manufacturing company "CASANOVA" (Pvt) Ltd. Technology stack: Node.js, Express.js, MongoDB Atlas, React.js (MERN Stack).

Project Name - Online Inventory Control System for an apparel manufacturing company "CASANOVA". The project was given a "A" grade. Group Leader - IT20

Dec 26, 2021

It is a solo Project and In this repo I try to build a E-Commerce full-stack website with MERN stack technologies. For Practice purpose.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Aug 3, 2022
Owner
Joe
Computer Science @ UMass Amherst
Joe
A tool that leverages the knowledge of experienced engineers to provide tech stack suggestions for your next application.

StackGen Key technologies used React React Router and Context API PostgreSQL React Testing Library Authentication Mantine The Problem There is an over

null 3 Jun 9, 2022
馃槀 is a self-hostable blog engine built on the tech that powers christine.website

?? ?? is a blog engine powered by Deno. ?? has no canonical pronunciation, and users are not encouraged to come up with one. ?? is and always will be

Xe Iaso 25 Sep 4, 2022
Simple budget-tracker web app developed using Vanilla JavaScript. Exercise from Warren Tech Academy.

Willow Personal Finance - Exercise from Warren Tech Academy About Project screenshots Installation Extra notes About Tools: HTML CSS (SASS) JavaScript

Douglas Ferreira 5 Sep 1, 2022
A technology stack solution using the AWS Serverless architecture.Atlas stack for building applications focused on generating value.

Atlas A technology stack solution using the AWS Serverless architecture.Atlas stack for building applications focused on generating value. Description

Atlas 7 Aug 29, 2022
A crawler that crawls the site's internal links, fetching information of interest to any SEO specialist to perform appropriate analysis on the site.

Overview ?? It is a module that crawls sites and extracts basic information on any web page of interest to site owners in general, and SEO specialists

Yazan Zoghbi 2 Apr 22, 2022
A crawler that crawls the site's internal links, fetching information of interest to any SEO specialist to perform appropriate analysis on the site.

Overview ?? It is a module that crawls sites and extracts basic information on any web page of interest to site owners in general, and SEO specialists

Yazan Zoghbi 2 Apr 22, 2022
Clone of a certain microblogging site. Based on Remix Indie Stack.

Microblog No guarantees that any of this works. I'm new at this and experimenting. Built on top of Remix's Indie Stack. Database query organisation mi

Kuldar Kalvik 44 Jul 10, 2022
Frontend tech guide and collection of highly recommended materials

Frontend Learning Kit Frontend tech guide and collection of highly recommended materials Show your support by giving a 猸 to this repo 2022 Frontend De

Sadanand Akshay Pai 2.2k Sep 19, 2022
A VS Code extension for solving problems from WorkAt.tech

VSCode-WorkAt VSCode-WorkAt is an extension that lets you write code for WorkAt.tech in VSCode. Check it out on the Marketplace. Features Choose a lan

Aditya Prakash 3 Aug 29, 2022
This is a project to testing coding habilities, it is part of the recruiting process of Liven.tech company

This is a project to testing coding habilities, it is part of the recruiting process of Liven.tech company

Romualdo 1 Feb 26, 2022