Hey, welcome to the first tutorial of Nuxt JS. Here, we will learn how to create a project from scratch, set it up, and build something interesting.
So without wasting your time let’s jump into code(s)!
Create Next JS Project using ‘create-nuxt-app’ (Official tool)
Tip: execute node -v to check if the node is installed or not.
$ yarn create nuxt-app project-name-here
Or with npm
$ npm init nuxt-app project-name-here
This command will install the dependencies and make a default structure of the nuxt app for you.
$ cd project-name-here
Now wait until all the dependencies get download and install
$ yarn dev
Or with npm
$ npm dev
This command will start a server on localhost:3000 (might be different in your case, the console will show you where it’s running)
As I already mentioned this post is not about explaining the code.
#Here is our very basic folder structure:
|-- assets
| `-- variables.scss
|-- components
| |-- hello.vue
|-- layouts
| |-- default.vue
| `-- error.vue
|-- nuxt.config.js
|-- package.json
|-- pages
| |-- index.vue
|-- static
| |-- favicon.ico
| |-- icon.png
|-- store
This is only a setup tutorial so I am not going to explain the code.
# layouts
/defult.vue
<template>
<v-app>
<nuxt />
</v-app>
</template>
# pages/index.vue
<template>
<v-layout column justify-center align-center>
<v-flex xs12 sm8 md6>
<v-card>
<v-card-title class="headline">Hello</v-card-title>
<v-card-text>
<p>This demo app is from 360 Tech Explorer</p>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</template>
$ nuxt generate
Or
$ nuxt build
ATTENTION HERE
nuxt generate: This command generates the static website (HTML, JS, CSS) without SSR (server-side rendering)
nuxt build: Build your application with webpack and minify the JS & CSS (for production).
Learn more:
https://stackoverflow.com/questions/46175023/nuxt-build-spa-vs-nuxt-generate
https://nuxtjs.org/docs/2.x/get-started/commands
https://nuxtjs.org/blog/going-full-static/
Note: Deployment is different if you choose `nuxt build` i like to go with a static website, so follow this section of the blog only when you do not want SSR.
In this tutorial, I am going to deploy this project on GitHub pages [A free static website hosting platform]
In this step create the deployment script according to your hosting platform, (here is one for Github pages)
npm init
npm install express
As I already mentioned this post is not about explaining the code.
Here is our very basic folder structure:
|-- api
| `-- hello.js
|-- config
|-- index.js
`-- package.json
# index.js
const express = require("express");
const cors = require("cors");
// Initialize the server
const app = express();
// Middlewares
// Form Data
app.use(express.json());
// app.use(bodyParser.urlencoded({ extended: true }));
// Cors Middleware (if you want)
// app.use(cors({ origin: "*", optionsSuccessStatus: 200 }));
// Bring in the hello route's
const keysuggest = require("./api/keysuggest");
app.use("/api/keysuggest", keysuggest);
const PORT = process.env.PORT || 5500;
app.listen(PORT, () => {
console.log(`Server started on port ${PORT}`);
});
# api/hello.js
const express = require("express");
const router = express.Router();
/*
*
* Description: This route is for sending "hello world" string
* return: String
* publisher: 360techexplorer.com
*
*/
router.post("/", (req, res) => {
res.send("hello world")
});
module.exports = router;
For this tutorial, I am going to deploy this on Heroku [heroku is one of the best hosting for dev’s]
$ heroku login
$ heroku git:remote -a {your-heroku-project-name}
$ git push heroku master
Now the frontend is live, the backend is live everything seems good.
If you have any questions feel free to ask here.
Cheese Javascript dev’s
This website uses cookies.