Nestjs and Nuxtjs Starter Boilerplate

Nestjs and Nuxtjs Starter Boilerplate

Use NestJS as custom NuxtJS server .Nestjs and Nuxtjs Starter Boilerplate

NestJS NuxtJs Boilerplate

NestJS and NuxtJS starter boilerplate

Requirements

  • Node.js 14.4.0
  • PostgreSQL

Development

For development the following additional dependencies are required:

  • Homebrew (for Mac OS X)
  • overmind
  • yarn

Setup

Make sure you have the latest version of nodenv (Node.js version manager) by following instruction:

brew upgrade nodenv

Create development and test databases:

CREATE DATABASE nest-nuxt-boilerplate-development
CREATE DATABASE nest-nuxt-boilerplate-test

Run migrations:

yarn db:migrate
NODE_ENV=test yarn db:migrate

Project structure

Folder Description
/ Contains project configuration files as well as typescript and linting specifications which are applied to both (NestJS and NuxtJS) applications.
app/client Contains the NuxtJS application directory as described here.
app/server Contains the NestJS application directory as described here.

What's included

NuxtJS Frontend
Also interesting for NuxtJS
NestJS Backend

Production Setup for k8s cluster

This project is managed with helm v3

  • Replace nest-nuxt-boilerplate with your awesome-project-name in /deploy
  • Replace your-namespace with your own k8s namespace
  1. Create shared namespace

    kubectl create ns your-namespace
  2. Copy deploy/secrets.example.yaml to

    • deploy/secrets.yaml
  3. Deploy secrets

    kubectl apply -n your-namespace -f deploy/secrets.yaml
  4. Deploy Helm chart

    cd deploy && helmfile apply

Deployment

Push to master branch will trigger new deployment on k8s.

Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000 (backend) and localhost:5000 (frontend)
$ overmind s

# build for production and launch combinded server (NestJS server serves NuxtJS frontend)
$ yarn build
$ yarn start:prod

For detailed explanation on how things work, check out NestJS docs or NuxtJS docs.

DB Migrations

k8s deployment includes db-migrate-job which will automatically run migrations on each deplyoment. Locally you have to use the following commands to interact with typeorm cli.

yarn db:migration:generate <migration_name>
yarn db:migrate
yarn db:rollback

To run migrations against test database use NODE_ENV=test yarn db:migrate

Graphql Schema and Operations

We chose to use the Nest.js code first approach (see here) which means that the app/server/schemal.gql file is automatically generated based on the types and resolvers we define in our Nest.js application. Further, we make use of GraphQL Code Generator to generate types and queries on the fly for the client based on the server's schema.gql file and the operations defined in one of the following files:

  • app/client/apollo/mutations.graphql
  • app/client/apollo/queries.graphql
  • app/client/apollo/subscriptions.graphql

The results are written to app/client/apollo/generated-operations.ts and can be used as-is (see here for more information).

If you run the application with overmind s then generated-operations.ts will be re-generated if there are changes to one of the files listed above. Otherwise you have to run yarn generate:types manually to re-generate the output file.

Download Details:

Author: zebbra-repos

Source Code: https://github.com/zebbra-repos/nestjs-nuxtjs-boilerplate

nestjs nuxtjs vue vuejs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

NestJs+VueJS develops WebStack website-source code

nest-webstack NestJs+VueJS+MongoDB develop WebStack .NestJs+VueJS develops WebStack website-source code

A boilerplate for Full stack VueJS and nestJS

A boilerplate for Full stack VueJS and nestJS and other typescript frameworks too. But i believe you can add JS frameworks too (with little modification)

Veluxi Vue.js Starter Project with NuxtJS and Vuetify

Veluxi Starter - Vue JS Landing Page Template .Veluxi Vue.js Starter Project with NuxtJS and Vuetify

Personal portfolio using VueJS, NuxtJS, Storyblok CMS, Axios

nuxt-storyblok-boilerplate .Personal portfolio using VueJS, NuxtJS, Storyblok CMS, Axios