Setup Nuxt JS project (Install, setup, deploy, etc)

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)!

What you will get at the end of this tutorial.

• A Nuxt JS-based website
• With Vuetify [A material UI framwork]
• A node JS backend
• Deploy

Setup Frontend

Create Next JS Project using ‘create-nuxt-app’ (Official tool)

1. Make sure nodeJS is installed, if not download it from nodejs.org.

Tip: execute node -v to check if the node is installed or not.

2. Open CMD or Terminal
3. Enter the following command to create the nuxt app.

$ 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.

4. Navigate to the project directory

$ cd project-name-here

5. Enter a few details like what Package manager you want to use.
6. And choose “Vuetify” when is asking for a UI framework.

Now wait until all the dependencies get download and install

7. Start the development server

$ 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)

8. Open “localhost:3000” on the browser.
9. Organize the folder stracture.

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

10. Let code our basic vuetify layout app.

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>

11. Now, build a nuxt app for Production

$ 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/

12. Let deploy it!

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.

13. Install `gh-pages` (optional)

In this tutorial, I am going to deploy this project on GitHub pages [A free static website hosting platform]

14. Create deploy script for your app

In this step create the deployment script according to your hosting platform, (here is one for Github pages)

15. Run the deploy script

Setup Backend

1. Open CMD or Terminal
2. Create a folder for the backend. (I labeled it “backend”)
3. Navigate to the backend folder.
4. Execute the following command

npm init

5. Now install packages that are required to run your server (I use express)

npm install express

6. Organize the folder stracture.

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

7. Let’s Write your backend (here is my index.js)

# 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;

8. Deploy node JS backend

For this tutorial, I am going to deploy this on Heroku [heroku is one of the best hosting for dev’s]

9. Push code to Heroku

$ heroku login
$ heroku git:remote -a {your-heroku-project-name}
$ git push heroku master

You are done

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