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
run-start: use the build stage to run nuxt start, with all dependencies from the build
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
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
The front-end Dockerfile will also be integrated into the Docker Compose configuration. This requires only minor modifications:
Set environment-specific apiUrl: The project sets its URL based on the application environment in use. The NuxtJS config will be updated to check the application environment and set the appropriate URL.
Add NUXT_HOST and NUXT_PORT environment variables, setting port to the previous value of 80 for compatibility with the rest of the Docker Compose configuration
Add run-dev target with mounted volume for local development hot-reloading
Nuxt.js configuration variables are poorly documented, but here are some links for reference:
Description
This PR will replace the front-end code with the Whythawk NuxtJS front-end, updating the project configuration files to match.
Changes
Front-end source code
The front-end source code will be replaced with the code from whythawk/nuxt-for-fastapi.
Dockerfile
A Dockerfile will be added for the whythawk/nuxt-for-fastapi front-end code. The Dockerfile is divided into four build stages:
build:run-dev: use the build stage to run the dev server, which can hot-reload within the Docker container if the source code is mountedrun-start: use the build stage to runnuxt start, with all dependencies from the buildrun-minimal: this image is less than 1/6 the size of the others (262 MB vs. 1.72 GB)buildstage, withoutnode_modulesnuxt-start, with the minimal runtime for Nuxt.js (needed in addition to the inlined dependencies from standalone mode)nuxt startcommand using thenuxt-startmodule to start the SSR applicationTo work with the Docker configuration:
Then browse to http://localhost:3000 to see the homepage.
Docker Compose
The front-end Dockerfile will also be integrated into the Docker Compose configuration. This requires only minor modifications:
apiUrl: The project sets its URL based on the application environment in use. The NuxtJS config will be updated to check the application environment and set the appropriate URL.NUXT_HOSTandNUXT_PORTenvironment variables, setting port to the previous value of80for compatibility with the rest of the Docker Compose configurationNuxt.js configuration variables are poorly documented, but here are some links for reference:
NUXT_HOSTandNUXT_PORT:NUXT_TELEMETRY_DISABLED:Documentation
READMEs will be updated with new project info and screenshots.