Git Product home page Git Product logo

basicwebapp's Introduction

basicwebapp

A basic deployable web app.

You want to make a web app but you don't know where to start.

  • Write your client code in HTML, Javascript, CSS in pageview.html.
  • Write your webserver code in index.js (for NodeJS).

View the webapp here: Software Engineering Web Technology

Experimental: Deploy

Dependencies

How to run

deploy locally

git clone https://github.com/luisschubert/basicwebapp.git && cd basicwebapp && npm install && npm start

deploy on heroku

heroku create && git push heroku master && heroku open

What is what

pageview.html Webapp

The html file which contains the structure of the elements that comprise the view represented in the browser.

index.js Webapp

The node.js file that contains the webserver.

const express = require('express');
const fs = require('fs');
const app = express();

app.set('port', (process.env.PORT || 7777));


// this creates a route for "/"
// the route responds to a HTTP request with an HTTP response
// the function that gets called for the / route
// (req, res) => {
//
// }
// (req, res) are the arguments to a function
// => denotes that the following block is the body of the function
// {} the block where the code for the function resides
app.get('/', (req, res) => {

    // read pageview.html from the os
    fs.readFile('pageview.html', (err, data) => {

        // check to see if the html file was loaded with an error
        if(err) {
            // if an error occurs return a 500 error
            // https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/500
            res.statusCode = 500;
        }
        else {
            // set the header to the content html file being served
            res.setHeader('Content-type','text/html');
            // write the content of the html file to HTTP Response
            res.end(data);
        }
    })
});

// set the port number of the webserver for listening to HTTP Requests
app.listen(app.get('port'), () => {
    console.log(`Node.js server is running`);
    console.log(`Listening for clients on port ${app.get('port')}`);
    console.log('http://localhost:7777');
    console.log('http://127.0.0.1:7777');
})

package.json Node Packet Manager

The npm file which is used for the npm package manager.

Procfile Heroku

Specifies heroku configuration.

app.json Heroku

The heroku app file.

Notes:

For your web server code you could be using many different programming languages. Amongst the most common are:

  • PHP
  • Python
  • NodeJS
  • Java
  • Scala
  • Ruby
  • Clojure
  • Go
  • .Net

basicwebapp's People

Contributors

luisschubert avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.