Giter Club home page Giter Club logo

userr00t.com's Introduction

Personal portfolio website. Created using C#, aspnetcore, nuxt, tailwindcss, docker, and more.

Stack

Frontend/Client (userr00t.com)

  • nuxt
  • nuxtjs/tailwindcss

Other dependencies

  • sparticles
  • vue-class-component
  • vue-property-decorator
  • nuxtjs/axios
  • dayjs
  • marked

Backend/Server (Pointer)

  • ASP.NET Core
  • Dapper
  • SqlKata
  • Npgsql
  • DDD Design
  • CRUD

Installation

Before trying to initialize this project on a webhost, make sure docker, and docker-compose are installed. Along with that, make sure you got a web server ready to serve the client html files. This is only required if you use nuxt's generate static pages method.

Note that while you may pull the docker container for server/Pointer, the client project does not have such feature. For that part of the application you must build it yourself. You can do so by using nuxt generate within the client folder.

Backend/Server (Pointer)

  1. Download the docker-compose.yml to your hosting path. Double check port numbers, image names, and volumes.
  2. Create a .env file based on the .env.sample file. Here you must set the three environment variables for postgres: POSTGRES_USER, POSTGRES_PASSWORD, & POSTGRES_DB
  3. Create a appsettings.json file based on the appsettings.json.sample. Make sure the Connection string matches the one set above in the .env.
  4. Your directory tree should now look something like this:
  • .env
  • appsettings.json
  • docker-compose.yml
    Run docker-compose up -d within the directory to start the api. By now you should be able to navigate to one of the routes in the application. You can also visit swagger by going to {YOUR_DOMAIN}/swagger.
  1. Create a way for the world to interface with the running api. This is different for everyone, and depends on your usecase. For one, they might want to use Traefik while others (myself included) just create nginx reverse proxy listing on a path of choosing (eg /api/).

Frontend/Client (userr00t.com)

  1. This varies from person to person. I myself just used nuxt generate and used nginx to serve the provided html files. Do make sure your try_files includes the 200.html file for dynamic routing. eg: try_files $uri $uri/ /200.html;

Building

Run the dotnet build tool on the project Pointer.Presentation.Api. This project will be the entry point of the application. An example command would be:
dotnet build Pointer.Presentation.Api/Pointer.Presentation.Api.csproj --configuration Release. Make sure your current working directory is set to server.

Building (Docker)

Set your working directory to server and run the docker image build command on the Dockerfile.

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.