Premium Features
How to Build Web Apps with Node.js - Project Setup
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:
Create an account
Log into their account
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:
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
.png)
hello chris i got this error on installing the packages
npm WARN deprecated vue2.7.16: Vue 2 has reach EOL and is no longer actively maintained. seee https://v2.vuejs.org/eol/ for more details
npx create-nuxt-app node-authentication
Can't post comments?
I keep getting stuck on this when trying to install: rxjs. I've tried several different terminals, tried npm and yarn, no matter what I do during installation it gets to this point and then it freezes and terminal crashes. How do I get around this?
I keep getting stuck on this when trying to install: reify:rxjs: timing reifyNode:node_modules/create-nuxt-app/node_modules/lodash Completed in 1537ms, I've tried several different terminals, tried npm and yarn, no matter what I do during installation it gets to this point and then it freezes and terminal crashes. How do I get around this?
I keep getting stuck on this when trying to install: reify:rxjs: timing reifyNode:node_modules/create-nuxt-app/node_modules/lodash Completed in 1537ms, I've tried several different terminals, tried npm and yarn, no matter what I do during installation it gets to this point and then it freezes and terminal crashes. How do I get around this?
I keep getting stuck on this when trying to install: reify:rxjs: timing reifyNode:node_modules/create-nuxt-app/node_modules/lodash Completed in 1537ms, I've tried several different terminals, tried npm and yarn, no matter what I do during installation it gets to this point and then it freezes and terminal crashes. How do I get around this?
There isn't a /server directory after running create-nuxt-app etc... am I supposed to make one and put the files in there? That's what I would do, but I hate to have to sort of guess in a tutorial because I'm not skilled enough to understand what's going on when I get error messages. I don't want to have to read random stackoverflow answers and cut and paste other code into places I also don't understand.
Thanks!
Hey dshhh, looks like nuxt took away the server option in a framework update. I’m going to redo this video completely to show you how to get up and running correctly with everything. I think nuxt is finally at a point where it won’t be changing much over the next couple of years, so hopefully this update will solve any issues that arise due to framework updates. Hang tight, should be able to start providing new videos as soon as Wednesday.
Just uploaded a newly edited vid that includes 17 minutes of extra content on how to get the /server directory setup exactly as you need to. Just let me know if it gives you any issues along the way, should be able to see the new content around the five minute mark!
Is there a download link or github repo for the completed project?
May I ask purely out of curiosity, did you use Vue because you work with it on a daily basis or because of other reasons?
I'm used to React so haven't looked much into Vue, though planned to, so I really feel like I'm in the deep end with this, but it's a good learning curve!
Hey Catley, I'm experienced with Vue and React, and honestly, I chose Vue because I enjoy using it more than react.
Vue came easier to me since .vue files use a syntax closer to traditional web development, I.E. having a section specifically for HTML, CSS, and JavaScript, all within one file (I'm aware React components have this too—Vue's syntax and structure just seems to be more organized and traditional compared to JSX etc.). I also found managing props, component data, and store data to be much easier to set up compared to React with Redux.
As a result, I decided to go with Vue only for web app projects from that point on.
Really think you'll like it if you stick with it, it's an awesome framework that just gets even better once you start using Nuxt instead of just pure Vue!
Hey! I'm Sally I saw your content on youtube and loved it...please is there a way I can pay for this course only without subscribing to the monthly plan..
Hi Sally! If you could shoot me an email using the site's contact form, I'd be more than happy to help you out. Should be able to get you set up very quickly!
hello chris i got this error on installing the packagesnpm WARN deprecated vue2.7.16: Vue 2 has reach EOL and is no longer actively maintained. seee https://v2.vuejs.org/eol/ for more detailsnpx create-nuxt-app node-authentication