Step by step - Create Nuxt3 app and deploy

Create Nuxt3, Webiny and AWS Amplify

Nuxt 3 Minimal Starter

Look at the nuxt 3 documentation to learn more.

yarn install
# yarn
yarn install

Setup

WSL for windows

Setup-WSL.md for windows

Install brew & node

You can use any package manager you like. Im going to use brew, very popular on mac, and works on other linux distros

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

install nodejs v20 or greater

brew install node
# check
node -v
# install yarn
npm install -g yarn

Nuxt project setup

# nuxt helper tool, install it globally to increase speed.
npm install -g nuxi   

#git setup, ssh is recommended
# git clone the base repo, with the base setup. tailwindcss is already setup.
git clone [email protected]:jeiksegovia/nuxt3-mvp.git

# cd on the root project
yarn install

# you can create nuxt project with:
# `npx nuxi@latest init my-app`
# or `nuxi init my-app` and installing the base modules
# nuxi module add @nuxtjs/tailwindcss 
# nuxi module add @vueuse/nuxt

Nuxt Basic structure

What is Nuxt
- works with Vue3
- supports ssr rendering
- allows more complex "behavior" when serving pages
- you can encapsulate these structures on pages, components, composables and plugins.
Good for SEO
Routes are created from folder structure
- you can create routes programmatically too
- nested pages and components
- mix and match routes /blog/special-[slug]/[title].vue
composable: reusable piece of logic, that uses vue reactive system. Naming is always:
- useMyComposable
- useMyOtherThing
we can use nuxi cli to create these elements quickly.
Nuxt Universal rendering:
- initial request, comes with pre-rendered version of the app. So User will see the page immediately.
- App bundle (logic), is shipped along, so user interaction will execute and load the correct views
- there are other optimization like nuxtLink, prefetch element, or lazy load elements.

Figma UI/UX

Design of the user interface, how it looks, styles. Design principles. UX is how users interacts with the elements. How usable those elements are for specific segment of users.

Before design

Product Owner role, who understand the product. Defines Features.
Persona, users preferences.
Flows & task flow, nice article
- big user journeys, features, specific task.
- Figma example diagram for the CampusConecta example MVP Then
wireframes
- faster to create and test
high fidelity mock-up
- spend a-lot of time on details and style
- CampusConecta figma Example

Code Nuxt app

You already git clone the base repository.
- run yarn install on the main brach, on the root of the project.
  - git checkout usage
- You can check each step by running git checkout mvp-{number from 1 to 17}
  - e.g git checkout mvp-1
install recommended extensions on vscode
Create the page structure
- git checkout mvp-1
Start to create "elements" according to the layout from figma desing
- how to decide which elements are "a component" . It's mainly about "single propose" and "Reusability".
  - Follow atomic design principles:
    - Promote Reusability
    - Ensure Consistency
      - Maintenance
      - UI style
      - Collaboration
    - Readability
    - atomic design
  - This translate into Nuxt elements:
    - Components: group functionality
    - Composables: share logic between different parts of the app
      - single use: extract complex logic from a page/component
      - reusable increase reusability
      - utilities
    - Layouts: group common "structures" on the app
    - Pages: defines an "area" of the app
    - middleware & pageMetaData

Branches

Task Description	Branch
Initial commit, empty Nuxt project	git checkout mvp-1
Add raw exampleData and layout	git checkout mvp-2
Add composables and preview data	git checkout mvp-3
Add Nuxt-links and type definitions	git checkout mvp-4
Add inner page	git checkout mvp-5
Add `for loop` on items and style	git checkout mvp-6
Add itemChecked functionality and component	git checkout mvp-7
Replace update pattern by `v-model`	git checkout mvp-8
Add ShadCN-vue and sidebar component	git checkout mvp-9
Add some styles to the sidebar	git checkout mvp-10
Add style to entries, and ShadCN-element	git checkout mvp-11
Fix issue with hydration	git checkout mvp-12
Add GraphQL package and first server API	git checkout mvp-13
Add entries endpoints	git checkout mvp-14
Add create entry endpoint mutation	git checkout mvp-15
Connect app to the CMS, add loader	git checkout mvp-16
Infrastructure as Code (IaC)	git checkout mvp-17

Engage base usage of vu3 and nuxt element from mvp-2 to mvp-8.

Install shadcn-vue

mvp-9

nuxi module add color-mode
nuxi module add shadcn-nuxt
# run shadcn cli
npx shadcn-vue@latest init
# let defaults values
# check aliases on the root tsconfig.ts

add to nuxt.config

/nuxt.config.ts

export default defineNuxtConfig({
....
	# add shadcn config on nuxt config
	shadcn: {
	/**
	* Prefix for all the imported component
	*/
	prefix: '',
	/**
	* Directory that the component lives in.
	* @default "./components/ui"
	*/
	componentDir: './components/ui'
	}
	....
});

# import components
npx shadcn-vue@latest add skeleton button separator tooltip input sheet sidebar breadcrumb dropdown-menu avatar collapsible

Shadcn documentation

check icons and naming lucid Sidebar example repo

Add style to components

git checkout mvp-9
git checkout mvp-10
git checkout mvp-11

add scroll panel, styling the entries

npx shadcn-vue@latest add scroll-area

check the console. Why we have a warning: hydration mismatch
- ssr vs client
  - local storage only exist on client, so server html has no information about checked items.

Headless CMS

now that we have something on the front end, we need the data. Alternatives
webiny
contentful
netlify CMS now decapCMS
payload CMS

Setup

check npm and yarn versions and upgrade if required:

# upgrade npm is required
npm update -g npm
# upgrade
sudo npm install -g [email protected]
yarn set version latest

Install webiny

# create webinu project on the root home ~/
cd ~/
# create webiny application
 npx create-webiny-project psn-mvp
 
# ? Please choose the AWS region in which your project will be deployed:
# ❯ us-east-1 (US East, N. Virginia) 

# ? Please choose the database setup you wish to use with your project
# ❯ DynamoDB (for small and medium sized projects) 
cd psn-mvp
#

Deploy infrastructure

Webiny Apps folder:

Core (./apps/core) - defines core cloud infrastructure resources
API (./apps/api) - your project’s (GraphQL) HTTP API
Admin (./apps/admin) - your admin area
Website (./apps/website) - your public website

AWS credentials

Place the AWS dev credentials into the following dir: ~/.aws/credentials

[psn-dev]
aws_access_key_id=<>
aws_secret_access_key=<>

Deploy commands

# inside psn-mvp/ folder
yarn webiny deploy apps/core --env dev --preview
yarn webiny deploy apps/api --env dev
yarn webiny deploy apps/admin --env dev --preview

# be carefull with the aws-profile
export AWS_PROFILE=psn-dev

# create
yarn webiny deploy apps/core --env dev
yarn webiny deploy apps/api --env dev
yarn webiny deploy apps/admin --env dev

# destroy
# yarn webiny destroy admin --env devv
# yarn webiny destroy api --env devv
# yarn webiny destroy core --env devv

Architecture overview

What's behind this CMS

IaC

Declare infrastructure by using TS, yaml, json or hcl files.

key concepts

Naming and "scoping" are important
- Differentiate environments
- Differentiate resources by prefix, suffix
State management
- local, stored on you machine. You must keep it safe, or share it in order to work with more people.
- cloud, aws/terraform-cloud keep the state and provide services for securely access it.
Security
CI/CD tools
- AWS codebuild, AWS code pipeline.
- Github workflows
- gitlab Runner
- Azure Pipelines
- Jenkins
Be aware of the costs implication

Use admin-app locally

CoreApp and API service are in the cloud now. We can deploy de adminApp and make it publicly available. But we an run it locally.

# run local admin, within psn-mvp
yarn webiny watch apps/admin --env dev

Setup the Admin account

Create model

Click over the menu, got to Headless CMS > Content Models > Models

Create the model with the same names, and properties:

  title: "Clases de Inglés",
  description: "Apoyo en gramática, conversación y preparación para exámenes internacionales.",
  price: "25,000 COP por hora",
  contact: "[email protected]",
  location: "Centro de Pasto",
  caregory: {{referenced field}}

Final result

Test Model on Playground

You can check how graphQL api works, visit local-playground

Create API key

We need an API. key to connect our Nuxt app. Go to Settings > Access Management > APIKeys. Create a new API Key.

Connect Nuxt App to GraphQL

Back on the nuxt app

mvp-13

Create .env. file This are The demo credentials to the demo instance.

CMS_URL=https://****3424242.cloudfront.net/cms/read/es
CMS_API_KEY=a17a713f921234234234242234345

Install graphQL

yarn add -D @nuxtjs/apollo@next
yarn add graphql-request

Create BFF (BackEnd Of Frontend)

mvp-14

nuxi add api v1/categories

export default defineEventHandler(async (event) => {
  
  const query = gql`
query {
  listCategories{
    data{
      id
      title
      description
    }
  }
}`

const { listCategories: { data } = {} } = await client.request<any>(query)
		.catch(error => {
			throw createError({
        statusCode: 500,
        statusMessage: error.message,
      })
		});

  return { data }
})```

- mvp-14,  mvp-15,  mvp-16, adds the other endoints

#### Apollo inside nuxt (Optional)

```ts
export default defineNuxtConfig({
.....
    componentDir: './components/ui'
  },
  apollo: {
    clients: {
      default: {
        httpEndpoint: process.env.CMS_URL || '',
      }
    }
  }
....
});

nuxi add plugin apollo

This allows to control which key is exposed on the client side. process.env.CMS_API_KEY is only available on server side.

export default defineNuxtPlugin((nuxtApp) => {
    const  API_KEY = process.env.CMS_API_KEY || 'NO API KEY';
    nuxtApp.hook('apollo:auth', ({ token }) => {
        console.log('apollo:auth', import.meta.server? 'server': 'client')
      // apply apollo client token
      token.value = API_KEY;
    })
  });

Deploy Nuxt app

mvp-17

Create gitHub Personal Access Token

Check this video be careful with your accessToken. Stored safely. It's shown only once on Github interface, so save it for later.

AWS credentials

Place the AWS dev credentials into the following dir: ~/.aws/credentials

[psn-dev]
aws_access_key_id=<>
aws_secret_access_key=<>

install AWS utilities

brew install aws-cli aws-vault
# test your credentials
aws sts get-caller-identity --profile psn-dev
# expected out put
{
    "UserId": "SDFASDFWE34SDEFS",
    "Account": "2342343243",
    "Arn": "arn:aws:iam::2342434234:user/psn-developer"
}

# aws-vault usage
# add psn-dev profile using simple file storage
aws-vault add psn-dev-2 --backend file 
# it shows:
Enter Access Key ID: 
# put the acess key fron .aws/credentials file
# then its show
Enter Secret Access Key:
# finaly it ask for the password to store everithing
Enter passphrase to unlock "/Users/your-user/.awsvault/keys/":

# You can loging to aws'console:
aws-vault login psn-dev
# copy an paste the long link shown in the consle into the browser. 
# you will see the aws console web page.
# go to ampligy console if you are curious about it https://us-east-1.console.aws.amazon.com/amplify/apps

Cloudformation template

Inside of infrastructure/amplify-app.yml add your repo url exactly as its shown in the example: github.com/jeiksegovia/nuxt3

....
      Platform: WEB_COMPUTE
      EnableBranchAutoDeletion: true 
      Repository: github.com/jeiksegovia/nuxt3-mvp<----your replo
      Tags:
        - Key: stack 
          Value: mvp
....

aws cloudformation deploy \
    --stack-name amplify-app-{put \a name} \
    --template-file infrastructure/amplify-app.yml \
    --capabilities CAPABILITY_NAMED_IAM \
    --parameter-overrides AppName=nuxt-mvp-{\nickname\} AccessToken=<your token>\
    --profile psn-dev \
    --region us-east-1

To get your app url by getting the Output from your Cloudformation stack

aws cloudformation describe-stacks --stack-name amplify-app --output text --profile disruptive --region us-east-1

The outout

STACKS  arn:aws:cloudformation:us-east-1:333333:changeSet/awscli-cloudformation-package-deploy-17333332837853/d8133333-3-3343-345cab  
.....
CAPABILITIES    CAPABILITY_NAMED_IAM
DRIFTINFORMATION        NOT_CHECKED
OUTPUTS The ID of the Amplify app.      AppId   d1qr5vlojb026a
OUTPUTS The URL of the Amplify app.     AppUrl  d1qr5vlojb026a.amplifyapp.com
OUTPUTS The name of the Amplify app.    AppName nuxt-mvp-test
PARAMETERS      AccessToken     ***
PARAMETERS      AppName nuxt-mvp-test
....

App url is on this line: OUTPUTS The URL of the Amplify app. AppUrl d1qr5vlojb026a.amplifyapp.com

Then commit a simple-change on your git repository to trigger the build process. After 5 minutes check the url.

Other tools for serverless work

SST new focused on AWS, uses CDK.
SAM AWS "Serverless tool"

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
.vscode		.vscode
docs		docs
pages		pages
.gitignore		.gitignore
.prettierrc		.prettierrc
README.md		README.md
app.vue		app.vue
nuxt.config.ts		nuxt.config.ts
package.json		package.json
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock

Folders and files

Latest commit

History

Repository files navigation

Step by step - Create Nuxt3 app and deploy

Nuxt 3 Minimal Starter

Setup

WSL for windows

Install brew & node

Nuxt project setup

Nuxt Basic structure

Figma UI/UX

Code Nuxt app

Branches

Install shadcn-vue

Shadcn documentation

Add style to components

Headless CMS

Setup

Install webiny

Deploy infrastructure

AWS credentials

Architecture overview

IaC

key concepts

Use admin-app locally

Setup the Admin account

Create model

Test Model on Playground

Create API key

Connect Nuxt App to GraphQL

Install graphQL

Create BFF (BackEnd Of Frontend)

Deploy Nuxt app

Create gitHub Personal Access Token

AWS credentials

install AWS utilities

Cloudformation template

Other tools for serverless work

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Packages