Nuxt.js 2.0 Forum

Demo link Nuxt.js Single Page (SPA) link: https://nuxt-spa-forums.firebaseapp.com/

Demo link Nuxt.js Static Generated link: https://nuxt-static-forums.firebaseapp.com/

Video link: https://youtu.be/33WeNhsAcBk

Application Description Page: https://ashot72.github.io/Nuxt2Forum/description/index.html

Git Repository: https://github.com/Ashot72/Nuxt2Forum

 

Nuxt.js https://nuxtjs.org/guide/ is a framework for creating Vue.js applications, and you can choose between

Universal, Static, or Single Page application. This application was originally created using Vue2.js

https://github.com/Ashot72/Vue2Forum. I converted the app and it is functioning exactly the same way using Nuxt.js.

Note, that you can run the app on all three modes both Universal, Static and Single Page without changing a single line of code!

 

Universal Mode

Figure 1

The command will run the app in Universal mode locally. You can open it by navigating http://localhost:3000

We ran the application in development mode.

Figure 2

Note, Universal is the default mode specified in nuxt.config.js file when creating a project.

In this mode we build a project which must run in Node.js server. First it is dynamically rendered on the server

and after the first load the application turns into the Single Mode (SPA) application. This is great for Search Engine Optimization (SEO).

As the page is rendered on the server without having to wait for all the JavaScript to be downloaded it ensures that users can still enjoy the fast speed provided by Server-Side Rendering.

 

Figure 3

Let's 'View Page source'.

 

Figure 4

The page is prerendered on the server on the fly upon requesting it. After it we are back in Single Page

Application world. In general, we created a normal vue.js app which was prerendered dynamically by Nuxt.js in Universal mode.

 

Figure 5

I clicked 'SharePoint 2013' link on the main page (Figure 3) and navigated to topics page.

 

Figure 6

I viewed the page source 'View Page source' without refreshing the topics. Nuxt.js server side rendered topics page.

Nuxt.js not only renders the initial page but all pages we navigate. It takes over and handles all future navigation actions and future re-rendering it needs to do.

 

Figure 7

'npm run build' generates files for production.

 

Figure 8

We have our optimized code in .nuxt/dist folder after the build is finished.

 

Figure 9

We run the production mode via 'npm start'.

 

Figure 10

App is running on production mode in http://localhost:3000

You should select a hosting provider which web server runs Node.js version 8.x or higher such as Heroku or AWS etc.

Depending on the provider you might not need to upload the node_modules folder because the npm install command

will be run automatically.

 

Single Page Application (SPA) Mode

 

Figure 11

npm run dev with spa option will run the app in Single Page Application mode.

 

Figure 12

The app is Single Page Application mode and you do not have any pre-rendering. Nothing gets rendered on the server.

This is not good for SEO if you need to load some asynchronous data before rendering something in the

screen and you have a problem. Google crawler is not going to wait for your content to be loaded. It just sees the entry

page. Nuxt.js app is the same as my Vue.js Forum created before https://github.com/Ashot72/Vue2Forum

but with Nuxt.js spa mode you benefit from simplified development, automatically inferred routing and all these Nuxt.js features.

 

Figure 13

Usually people change the mode in nuxt.config.js file from universal to spa in order to build the app in Single Page mode. We will not

to do that way. We should not change a file in the app and the mode should always be universal.

 

Figure 14

We run the build command with spa option and generate Single Page Application though the mode is still universal in nuxt.config.js file.

 

Figure 15

Before running the build command above, I commented out generate object section in nuxt.config.js. We should not do it as with generate object spa will be

generated without a problem. I promised we should not change any file in the project. We will back to this point later but now let's comment it out.

 

Figure 16

The output is different as compared to universal mode. We will not get these .nuxt folder which has some supporting files for our environment but

a brand-new folder instead. It is dist folder. dist folder's content can be deployed to a static host such as Firebase hosting or GitHub pages.

You can also install an extra server to test our application on a static host.

 

Figure 17

Globally install http-server which is a light weight node server you can run any folder on your machine to serve it.

 

Figure 18

Navigate into dist folder.

 

Figure 19

This spins up a server on localhost 8080. Let's visit it now.

 

Figure 20

The app is running on localhost:8080. In order to access to topics page a user has to be authenticated. You can either sign in or sign up.

 

Figure 21

Trying to sign in.

 

Figure 22

I am on topics page. Let's refresh the page.

 

Figure 23

You see localhost page can't be found. We refreshed the browser and sent a new request to server which we run does not know

this route. The routes are stored in the view router in our application which never gets a chance to run if we refresh the page and

the server blocks that. When we deploy a single page application we need to ensure that we set our server up to always return the

index.html file in case of server side 404 errors.

Let's push our Single Page Application to firebase.

Go to https://firebase.google.com/ then to your console and create a project.

 

Figure 24

 

I created nuxt-spa-forums project

 

Figure 25

After you built the project with spa option, install firebase tools globally. Make sure you are out of dist folder.

 

 

Figure 26

Run firebase login. It will open a browser for you to login.

 

Figure 27

I successfully logged on.

 

Figure 28

Adding the project.

 

Figure 29

Run firebase init then type y to proceed.

 

Figure 30

Select 'Hosting' option then click Enter.

 

Figure 31

Type dist as we serve our files from dist folder.

 

Figure 32

For single page app option type Yes and for Overwrite No. You see that in forebase.json file rewrites section generated.

Our single page application will always serve index.html file in case of server side 404 errors.

 

Figure 33

Run firebase deploy. You see the hosting link was generated. Click on it to navigate to the page.

 

Figure 34

Our single page application is running on Firebase static-host. Let's login and navigate to topics page.

 

Figure 35

I am on topics page. By viewing the page source, you can see that it is not Server-Side rendered. Refresh the page and you will be on the same page.

No errors!

 

Static Mode

In this mode Nuxt.js generates the entire app as static files which we can be deployed to a static host during or after development. In order to do it we should make sure that we are on universal mode as we are. In this mode it progenerates all our files.

 

Figure 36

You remember we commented out generate section. Let's uncomment it.

 

Figure 37

Run npm run generate command. This will build the code and pre-generate all pages and give you a folder for each page and index.html files.

 

Figure 38

In dist folder we have subfolders for different pages and index.html files for each one of them.

 

Figure 39

If you inspect them you will see it is optimized and all data are there.

Let's deploy static pages to Firebase hosting.

 

Figure 40

I created nuxt-static-forums project.

 

Figure 41

We are starting the same way as we did for Single Page Application case.

 

Figure 42

This time for single page option you should select No as it is a not a single page application. 404.html has been added by Firebase.

 

Figure 43

Note, we do not have rewrites section in firebase.json file (Figure 32). It is not required in static pages case.

 

Figure 44

Finally, we ran the last command firebase deploy. Hosting URL was generated to navigate.

 

Figure 45

We can load our starting page and see forums that has been pre-generated. Every possible entry point has been pre-generated.

 

Figure 46

If we then click around, say topics link, we are back in a single page application which is important. Now, we do not send real requests and

get back to real pages. This is pretty amazing because with that we got the best of both worlds. We got search engine optimization application because

everything is pre-generated and all the HTML files with all the content are there for the crawlers to be consumed. You do not need on the fly

page pre-rendering on the server, hence you don't need Node.js server and static-host is all you need and you still have a single page application.

 

Figure 47

You remember that when we built the project for Single Page Application we commented out generate section (Figure 14 and Figure 15).

This time I ran the command with generate without the comment. If you compare the previous result Figure 16 with this one you will see

that in dist folder we have posts and topics section. This is because static pages are generated as well. Though posts and topics folders are there

they do not have any impact on Single Page Application. Pushing dist folder with those folders to a hosting will

not do any harm at all. They are simply ignored. I commented out generate object before to show the clean dist folder output in

Single Page Application mode (Figure 16). So, without changing a single line we could ran it on three modes.

 

Figure 48

Creating a new forum on nuxt-static-forums Firebase hosting.

 

Figure 49

The forum is generated

 

Figure 50

After the page refresh the forum disappeared.

 

Figure 51

The reason is that the newly added forum was not pre-generated when we pushed the dist folder to our hosting.

 

Figure 53

Let's click on Vue.js forum and navigate to topics page.

 

Figure 53

We are on topics page. Click Home to go back to forums page.

 

Figure 54

This time you see the forum as we are in Single Page Application mode navigating from topics back to forums and forums are retrieved from Firebase database.

 

Figure 55

Create a new topic in our newly created forum.

 

Figure 56

Click Sample Topic link to navigate to posts page.

 

Figure 57

Refresh the post page.

 

Figure 58

The page breaks as it is not staticky generated. The same is true with topics page. The application will work on Single Page Mode though (Figure 54)

In order to work properly you have to regenerate your pages when your dynamic content changes. It can be also set up as a dynamic automated process.

 

Figure 59

404 Page Not Found error message is coming from 404.html file generated by Firebase which can be modified.

 

Figure 60

Newly generated post will not break in Single Page Application mode and the post will be retrieved from Firebase database.

 

Figure 61

So, we have Single Page Application which is not server-side rendered and deployed to https://nuxt-spa-forums.firebaseapp.com

 

Figure 62

and Static Website which is server-side rendered and deployed to https://nuxt-static-forums.firebaseapp.com