Basic Web App Template

Web apps are very powerful. They’re able to get a project started quickly, developed quickly, and available on computers, iPhones, and Androids. We’ll show you how to build a simple web app that allows you to log in, and it saves some data in your account:

There is so much choice available for you to start your web app. Rails, Go, Python, Node, pick a backend. React, Vue, Angular, jQuery, Javascript, Typescript, pick a frontend. Bootstrap, SASS, CSS resets, pick a styler. MySQL, SQLite, Mongo, Mongoose, pick a database and ORM. And we haven’t even gotten the user to be able to sign up and log in yet…

To help get your web app project started quickly, and on a good path, I’ve created a minimal working web app with simplicity in mind, consisting of:

• Node
• jQuery
• Bootstrap
• Passport

First we start off by installing Node.

Then we can create a project with express generator:

npx express-generator webapp --view=ejs
cd webapp
npm install
npm start

Open up http://127.0.0.1:3000 and you shall see a web app running.

Now, let’s make it do things:

npm install body-parser passport passport-local express-session ejs nodemon connect-sqlite3 csurf connect-ensure-login

We’ll base our user login system on Passport, which is a node module for authenticating users. We’ve based a lot of the code on the todo example from Passport.

The app.js file runs the web app. Let’s take a look at it:

The main.js frontend gets loaded in the browser and allows loading and saving user data with example jQuery code to get you started. Just click the Status text on the page to save the state of it, which is loaded on page load:

The HTML files are served from Embedded JavaScript (EJS) templates, which allows us to put tags in them to include other files, and output text from code. To add a navigation header bar across a few pages, we make home.ejs and other pages include header.ejs and footer.ejs. You can see that the header navigation bar changes based on if the user is logged in or not:

The database.js file handles creating tables in the database:

The auth.js file handles user email sign ups and logins:

The run.js file serves the /api/ routes to allow the page to load and save user data by getJSON calls on the page, and the database.js file creates the tables in the SQLite database to store the user data:

Now the web app does a little more, let’s run it again:

npm start

Go to http://127.0.0.1:3000 again, and this time you can log in, navigate around, and log out. Great!