Nginx

Nginx and Certbot settings

Certbot is a very useful tool to setup auto renewal of certificates. Here is how I’m setting up certbot and nginx quick and easy. Initial Setup Here is the docker-compose.yaml file with nginx and certbot services: nginx: image: "nginx:alpine" container_name: app_nginx ports: - 80:80 - 443:443 volumes: - ./platform/config/nginx/nginx.conf:/etc/nginx/nginx.conf:ro - ./platform/config/certbot/www:/var/www/certbot:ro - ./platform/config/certbot/conf:/etc/letsencrypt:ro restart: always certbot: image: certbot/certbot container_name: app_certbot volumes: - ./platform/config/certbot/www:/var/www/certbot:rw - ./platform/config/certbot/conf:/etc/letsencrypt:rw Every file that’s generated by certbot will be stored in ./platform/config/certbot ...

Nextjs - Setup with Bootstrap

Setup nextjs with bootstrap Initialize nextjs project with typescript pnpm create next-app --typescript Install bootstrap pnpm add bootstrap Add bootstrap css to app/layout.tsx or pages/_app import "bootstrap/dist/css/bootstrap.min.css"; Create a bootstrap client component components/Bootstrap.tsx "use client"; import { useEffect } from "react"; function BootstrapClient() { useEffect(() => { require("bootstrap/dist/js/bootstrap.bundle.min.js"); }, []); return null; } export default BootstrapClient; Add bootstrap client component to app/layout.tsx or pages/_app layout.tsx might look like this. import BootstrapClient from "@/components/boostrap"; import "bootstrap/dist/css/bootstrap.css"; import type { Metadata } from "next"; export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body>{children}</body> <BootstrapClient /> </html> ); } Exporting as static site. Add the following to next.config.js ...

Nextjs - Export as static site

Nextjs is a great framework to create multiple page react applications. It can also export the whole app as a static site. This is extremely useful if we want to avoid nodejs server and use another server like nginx to host the site, which is faster and more efficient. To export the site, we need to change the next.config.js file to include the following: const nextConfig = { distDir: "build", output: "export", }; export default nextConfig; This will export the app as a static site to build folder. The build folder will contain all the static files, which can be hosted using any static hosting solution. ...