Skip to content

Latest commit

 

History

History
91 lines (62 loc) · 4.18 KB

README.md

File metadata and controls

91 lines (62 loc) · 4.18 KB

Nuxt.js frontend replacement for FastAPI base project generator

What is it?

Accelerate your next FastAPI Base Project Generator frontend development with NuxtJS, an open source framework making web development simple and powerful.

Setup

Make sure to install the dependencies:

# yarn
yarn install

# npm
npm install

Development

Start the development server on http://localhost:3000

# yarn
yarn dev

# npm
npm run dev

Production

Build the application for production:

# yarn 
yarn build

# npm
npm run build

Locally preview production build:

#yarn
yarn preview

# npm
npm run preview

Checkout the deployment documentation for more information.

Docker

A Docker configuration is also provided. The Dockerfile is divided into four build stages:

  1. build:
  2. run-dev: use the build stage to run the dev server, which can hot-reload within the Docker container if the source code is mounted
  3. run-start: use the build stage to run nuxt start, with all dependencies from the build
  4. run-minimal: this image is less than 1/6 the size of the others (262 MB vs. 1.72 GB)
    • Pull a Node.js image running on Alpine Linux
    • Copy the built Nuxt.js app from the build stage, without node_modules
    • Install nuxt-start, with the minimal runtime for Nuxt.js (needed in addition to the inlined dependencies from standalone mode)
    • Run the nuxt start command using the nuxt-start module to start the SSR application

Important note: The main trade-off for the minimal production build is that any NuxtJS modules declared in the modules: section of the nuxt.config.js file must also be specified in the Dockerfile on the yarn add line as shown here (it's not installing from the package.json, which is one reason why it's smaller). To switch from the minimal production build to the full production build, either specify the target build stage in the docker-compose.yml (target: run-start, as is done for the local development configuration here), or push Docker images from each stage to a registry, then specify the appropriate tag to be pulled (with the TAG environment variable, as shown here).

To work with the Docker configuration:

cd /path/to/full-stack-fastapi-postgresql/{{cookiecutter.project_slug}}/frontend

# build and run the development environment with hot-reloading
docker build . --rm --target run-dev -t localhost/whythawk/nuxt-for-fastapi:run-dev
docker run -it -p 3000:3000 -v $(pwd):/app --env-file $(pwd)/.env localhost/whythawk/nuxt-for-fastapi:run-dev

# build and run the minimal production environment
docker build . --rm --target run-minimal -t localhost/whythawk/nuxt-for-fastapi:run-minimal
docker run --env-file $(pwd)/.env -it -p 3000:3000 localhost/whythawk/nuxt-for-fastapi:run-minimal

Then browse to http://localhost:3000 to see the homepage.

Licence

This project is licensed under the terms of the MIT license.