Premium Features

Download Video

How to Build Web Apps with Node.js - Project Setup

Published 2 years ago

A web app is typically a bit different than your standard static website. Rather than just displaying content, a web app helps serve some sort of functionality in which a user can achieve a goal through web based input / output. They typically involve creating some sort of registration system in which a user can:

  1. Create an account

  2. Log into their account

  3. And log out of their account

When a user logs into their account, they've proven that they are the account owner, thus they can begin to perform user-specific actions which are private to them, such as depositing money into their bank account, creating a post on their Twitter timeline, or completing a code challenge on Chris Courses.

This course will teach you everything you need to know to begin creating your own web apps, so you can begin making change in the world through web technologies. Specifically, we'll be covering how to develop your own registration and authentication system from the ground up, using Nuxt and Express.js as our main frontend and backend frameworks.

In this lesson, you'll learn a bit more about web apps, how to install Nuxt with NPM, and then how to create and integrate a backend express server with the newly created Nuxt app.

Some code you'll need for your backend express server is below:

server/app.js
const { loadNuxt, build } = require('nuxt')

const app = require('express')()
const isDev = process.env.NODE_ENV !== 'production'
const port = process.env.PORT || 3000

async function start() {
  // We get Nuxt instance
  const nuxt = await loadNuxt(isDev ? 'dev' : 'start')

  // Render every route with Nuxt.js
  app.use(nuxt.render)

  // Build only in dev mode with hot-reloading
  if (isDev) {
    build(nuxt)
  }
  // Listen the server
  app.listen(port, '0.0.0.0')
  console.log('Server listening on `localhost:' + port + '`.')
}

start()

Grabbed from: https://nuxtjs.org/docs/2.x/internals-glossary/nuxt-render/

Comments

Want to participate?

Create a free Chris Courses account to begin

Login
d
dshhh posted 5 months ago
1
chris posted 5 months ago
1
d
dshhh posted 5 months ago
0
chris posted 5 months ago
0
c
claybeast posted 8 months ago
0
C
Catley posted 2 years ago
1
chris posted a year ago
0
S
S255y posted 2 years ago
0
chris posted a year ago
1
Cheat Sheet Preview

Download The Official Chris Courses HTML5 Canvas Cheat Sheet

Essential canvas syntax at your fingertips.

Download Now

Providing the lift to launch your development career

© 2021 Chris Courses. All rights reserved.