/nuxt4-fullstack-portfolio

A production-ready, fully containerized full-stack application. It includes an authorized email service (postfix&dovecot), MongoDB, PostgreSQL, Redis, Certbot (SSL CA), Socket.io, and Nginx. Additionally, it is distributable on CapacitorJS and electron 😮‍💨.

Primary LanguageVueMIT LicenseMIT

Nuxt Minimal Starter

project img

Welcome to the Nuxt Minimal Starter! This repository provides a foundational setup for a full-stack application using Nuxt 4, along with various useful Docker containers. For more detailed information, refer to the Nuxt documentation.

Table of Contents

Setup

Important

Ensure that you have Bun installed on your machine.

Install the necessary dependencies:

bun install

Development Server

To start the development server, navigate to http://localhost:3000:

bun run dev

Production

Tip

Run with Docker

A pre-built Docker image is available on Docker Hub. You can find instructions on how to pull the image and run it with Docker Compose in the repository's documentation.

To build the application for production, run:

bun run build

Warning

If you're trying to build the app on a weak server with limited resources, please follow the instructions in the weak_servers.md file to ensure a successful build process.

To locally preview the production build:

bun run preview

Docker Configuration

Refer to the b.dev.yml file to set up your full-stack application.

  1. Create a new .env file based on the .env.example file and fill in your correct environment variables.
  2. Run the following command to start your Docker containers:
docker compose -f b.dev.yml up -d --build

Congratulations! 🎉👏 You are now running your own full-stack production-ready initial version of the project!

Building for Electron

To create a production build for Electron, you will need to configure a specific set of environment variables.

  1. Create your .env.electron file by copying the example file:

    cp .env.electron.example .env.electron

  2. Fill in the required environment variables in the newly created .env.electron file.

Once your environment is configured, you can use the following commands to build the Electron application for different targets:

  • bun run build:electron: Build for the current platform.
  • bun run build:electron:all: Build for Windows, macOS, and Linux.
  • bun run build:electron:win: Build for Windows only. -- bun run build:electron:mac: Build for macOS only.
  • bun run build:electron:linux: Build for Linux only.
  • bun run build:electron:dir: Build in an unpackaged directory for testing.

Domain Configuration

Make sure to update the domain name baderidris.com in the b.dev.yml file and its associated configuration files to your own domain name.

Mobile Application Setup

To add Android and iOS support, create the respective directories in your project:

bunx cap add android ios

To create your .env.capacitor file, rename the existing example file:

mv .env.capacitor.example .env.capacitor

And add correct environment variables to it!

Adding App Icons

To customize your app icons, modify the icons in the /assets folder as desired, then run:

bunx capacitor-assets generate --assetPath "./assets" --ios --android

You can review the configuration requirements in the assets/requirements.md file.

firebase notifications

Warning

Do this to not crash the app when using push notifications.

To run properly without crashing the mobile app, you have to have this file android/app/google-services.json, check the docs: and firebase docs

Building the Android App

To build the Android app, ensure you have Android Studio installed on your machine and set the required environment variables.

Caution

Restart your shell session after adding the environment variables.

Key environment variables include:

  • ANDROID_HOME
  • CAPACITOR_ANDROID_STUDIO_PATH

Required Environment Variables

Caution

Modify the values in the .env file to reflect your specific configuration.

To create your .env file, rename the existing example file:

mv .env.example .env

Caution

If you are using Windows, ensure that you install Git and use Git Bash for an improved development experience.

Production Setup

Important

Ensure that Docker is installed on your machine.

To initiate the production setup, run the following command at the project root level:

docker compose -f ./a.prod-certbot.yml up -d --build

Afterward, you will need to force Certbot to renew certificates to remove the --staging flag. It is recommended to create a separate compose file for this purpose and for future renewals.

Important

replicas and docker swarm concerns

You have to name the root project dir as portfolio or change server/config/nginx/nginx_with_certbot_secured.conf file => upstream servers based on your container name?s or outer ip address?es

Setting Up Cron for Certificate Renewal

To automate certificate renewals, create a cron job by modifying the paths in the /server/config/nginx/ssl_renew.sh file, then add this file to your crontab:

# To edit your crontab, run:
crontab -e

# Add the following line to schedule the renewal script:
0 12 * * * /home/bader/portfolio/server/config/nginx/ssl_renew.sh >> /var/log/cron.log 2>&1

Tip

Review the ssl_renew.sh file for additional useful tips and configurations.

Security

To enhance the security of your application and prevent common attacks such as DDoS, we have implemented Fail2Ban.

The following files are included in the configuration:

ls server/config/fail2ban/
directory => filter.d
file => my_custom_jail.local

Custom Jails and Filters

We have created custom jails and filters to allow users to add their configurations after installing the tool. This flexibility helps you tailor the security settings to your specific needs.

Thank you for using the Nuxt Minimal Starter! If you have any questions or need further assistance, feel free to reach out.