Oh hello here ! 👋🏼
In this post, we go to create a simple Nuxt website with Netlify, and how to configure the application to have a better renderer.
The difference between this post and an other tutorial how to deploy your Nuxt website on Netlify ? The Configurations with the beautiful netlify.toml ✨
This post is available in French language →
Explain what is...
Nuxt
Nuxt is an open source framework based on Vue.js, a progressive JavaScript framework for creating user interfaces. Some good features such as server-side rendering (SSR), static site generator, advanced route management and global state management are here.
Netlify
We got a framework, we have to make sure that we build it and deploy it in order to publish it on the Internet.
Netlify is here for that, we can deploy with some fairly simple settings our JS application.
Start to create the Nuxt v3 project !
Be sure to have Node.js and also NPM installed on your client.
We can create the Nuxt application with :
npx nuxi@latest init my-app
Terminal output:
thomasbnt@thomasbnt:~/lab$ npx nuxi@latest init my-app
Need to install the following packages:
nuxi@3.4.2
Ok to proceed? (y) y
Nuxi 3.4.2
✨ Nuxt project is created with v3 template. Next steps: 8:46:21 PM
› cd my-app
› Install dependencies with npm install or yarn install or pnpm install PM
› Start development server with npm run dev or yarn dev or pnpm run dev
Don't hesitate to run npm install/yarn in your folder project.
Open that on your code software.
netlify.toml file
One of the power of Netlify are configs files. With that, you can deploy your website without interact with the dashboard of Netlify (only one time for the installation)
In the netlify.toml, we can add some lines for configuration deployment and plugins.
⚠ File-based configuration settings take precedence
Be aware that if you have conflicting configuration values, settings specified in netlify.toml override any corresponding settings in the Netlify UI.
For this project, there is the netlify.toml :
# The build part for Netlify with a Nuxt project
[build]
base='/'
publish='dist'
command='nuxt generate'
environment = { NODE_VERSION = "18.0.0" }
# We can put redirects
[[redirects]]
from = "/devto"
to = "https://dev.to/thomasbnt"
status = 301
# Also put headers
[[headers]]
for = "/*"
<span class="nn">[headers.values]</span>
<span class="py">X-Frame-Options</span> <span class="p">=</span> <span class="s">"DENY"</span>
<span class="py">X-XSS-Protection</span> <span class="p">=</span> <span class="s">"1; mode=block"</span>
<span class="py">X-Content-Type-Options</span> <span class="p">=</span> <span class="s">"nosniff"</span>
<span class="py">cache-control</span> <span class="p">=</span> <span class="s">"public, max-age=10000, must-revalidate"</span>
Create your repository
Netlify uses Git (commits nor pull requests) to trigger new incoming modification on your project.
Create your repository, private or public it's works.
And time to push your local work on GitHub :
thomasbnt@thomasbnt:~/lab/my-app$ git init
Initialized empty Git repository in /home/thomasbnt/lab/my-app/.git/
thomasbnt@thomasbnt:~/lab/my-app$ gc .
On branch main
Initial commit
thomasbnt@thomasbnt:~/lab/my-app$ ga .
thomasbnt@thomasbnt:~/lab/my-app$ gc "Init"
[main (root-commit) a3b9cff] Init
10 files changed, 4392 insertions(+)
create mode 100644 .gitignore
create mode 100644 .npmrc
create mode 100644 README.md
create mode 100644 app.vue
create mode 100644 netlify.toml
create mode 100644 nuxt.config.ts
create mode 100644 package.json
create mode 100644 public/favicon.ico
create mode 100644 tsconfig.json
create mode 100644 yarn.lock
thomasbnt@thomasbnt:~/lab/my-app$ git branch -M main
thomasbnt@thomasbnt:~/lab/my-app$ git remote add origin git@github.com:thomasbnt/nuxt-netlify-example.git
thomasbnt@thomasbnt:~/lab/my-app$ git push -u origin main
Enumerating objects: 13, done.
Counting objects: 100% (13/13), done.
Delta compression using up to 12 threads
Compressing objects: 100% (12/12), done.
Writing objects: 100% (13/13), 82.32 KiB | 11.76 MiB/s, done.
Total 13 (delta 0), reused 0 (delta 0), pack-reused 0
To github.com:thomasbnt/nuxt-netlify-example.git
* [new branch] main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.
Time to deploy on Netlify
- Go to Netlify, and create an account, it's free.
- Import your git project into netlify from Import an existing project
- Choice GitHub and grant the integration
- Choice the repository with your Nuxt website
Pick the Nuxt website on Netlify from the import an existing project from a Git repository
- Fill in all fields, by default Netlify detects that it's Nuxt so it will put values for you.
- PUSH to the Deploy site button!
Here we gooo! You can see your website is building, wait one or two minutes, and you've got your website published! Magic! 🧙🏼♂️
Share us your website, and your best configurations file in comments ✨🌱
Documentations
| ☕ | Check my Twitter account. You can see many projects and updates. You can also support me on Buy Me a Coffee, Stripe or GitHub Sponsors. Thanks for read my post ! 🤩 |
|---|
Top comments (0)