How to implement Express Node JS Browserify properly?-CodePudding

So I'm somewhat new to the whole web development thing with node.js and I'm wondering if someone could help me out with understanding how to implement my application correctly.

So the app is a simple landing page with an email form that takes an email and sends it to the API. I designed this functionality without issue except when I launched my website i'm getting a required not defined error.

I understand that this is because node.js is a server side technology so that when the application goes live, the client doesn't understand what required means.

Through further research, I figured out that I had two options and that's to either implement synchronous dependencies via something like Browserify or take things asynchronously and use something like RequireJS.

Right now I've decided on using Browserify, (unless someone can convince me otherwise) I just need help with figuring out how to implement it for my specific app.

app.js

//The dependenices my node js app needs (also where the require bug occurs)
//------------------------------------------------------------------------------------------------------------------------
const express = require('express'); //Require the express package that we installed with npm install express

const request = require('request'); //Require the express package that we installed with npm install request

const bodyParser = require('body-parser'); //Require the express package that we installed with npm install bodyParser

const path = require('path'); //Require the express package that we installed with npm install path
//------------------------------------------------------------------------------------------------------------------------



const app = express(); //Creates the application with express


//Middleware
app.use(express.json()); //Tells express to use JSON as it's input

app.use(bodyParser.urlencoded({ extended: false })); //Prevents XSS, only will return if the url has specified enconding

app.use(express.static(path.join(__dirname, '/site'))); //Tells the app to use the current path D:\Gaming Galaxy\Website\Website\main\site as the dir for the website

console.log("The directory used is", express.static(path.join(__dirname, '/site')));

app.post('/subscribe', (req, res) => { //Makes a post request to express req is the request and res is the response
    const { email, js } = req.body; //Create a constant that makes up of the request's body

    const mcData = { //Create a constant JSON object mcData, that contains the email from the above constant and a status message
        members: [
            {
                email_address: email,
                status: 'pending'
            }
        ]
    }

    const mcDataPost = JSON.stringify(mcData); //Turns the JSON object into a string

    const options = { //Sets a JSON object of a bunch of options that mailchimp will use
        url: 'https://us20.api.mailchimp.com/3.0/lists/f10300bacb',
        method: 'POST',
        headers: {
            Authorization: 'auth f24c3169da044653d1437842e39bece5-us20'
        },
        body: mcDataPost
    }

    if (email) { //If there's an email that exists
        request(options, (err, response, body) => { //Send a request to mail chimp
            if (err) { //If there's an error
                res.json({ error: err }) //Print said error
            } else { //If there's not an error
                if (js) {  //If javascript is enabled (boolean)
                    res.sendStatus(200); //Send a success message
                } else {
                    res.redirect('/success.html'); //If it's disabled, send them to a successful HTML page.
                }
            }
        })
    } else {
        res.status(404).send({ message: 'Failed' }) //If the email doesn't exist, have it fail
    }

});

app.listen(5000, console.log('Server started!')) //Console log that confirms the start of the server

package.json

{
  "name": "gaminggalaxy",
  "version": "1.0.0",
  "main": "site/js/app.js",
  "dependencies": {
    "body-parser": "^1.19.0",
    "commonjs": "^0.0.1",
    "express": "^4.17.1",
    "index": "^0.4.0",
    "node-fetch": "^2.6.6",
    "prototype": "^0.0.5",
    "request": "^2.65.0",
    "requirejs": "^2.3.6",
    "uniq": "^1.0.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  },
  "scripts": {
    "serve": "node app",
    "dev": "nodemon app"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "repository": {
    "type": "git",
    "url": "git https://github.com/InvertedTNT/Main.git"
  },
  "bugs": {
    "url": "https://github.com/InvertedTNT/Main/issues"
  },
  "homepage": "https://github.com/InvertedTNT/Main#readme",
  "description": ""
}

index.html (the form itself)

<form action="/subscribe" method="POST">
   <div class="newsletter-form-grp">
        <i class="far fa-envelope"></i>
        <input type="email" name="email" id="email"
              placeholder="Enter your email..." required>
    </div>
    <button id="cta">SUBSCRIBE <i class="fas fa-paper-plane"></i></button>
</form>

folder structure

node_modules
site
  -index.html
  -css
  -js
     - app.js
  -images
app.js
package-lock.json
package.json

Thank you for your help, I would appreciate any sort of advice on how I can use those dependencies and the overall implementation of browserify.

CodePudding user response：

A browser is an HTTP client.

Express is a framework for building HTTP servers.

HTTP clients make requests to HTTP servers which then send responses back.

Express depends on Node.js. It requires features provided by Node.js (like the ability to listen for network requests) which are not available in browsers.

Browserify can bundle up JavaScript which is written using modules into non-module code that can run in a browser but only if that code does not depend on Node.js-specific features. (i.e. if the JS modules are either pure JS or depend on browser-specific features).

Browserify cannot make Express run inside the browser.

When you run your JS program using Node.js you can then type the URL to the server the program creates into the browser’s address bar to connect to it.