Using npm Applications Client Side

[iwato]

BACKGROUND:  I recently install nodejs and npm and downloaded a library call xregexp.js  Then, I discovered what I did not know.  The applications nodejs (node) and npm are primarily designed for server-side Javascript.  Now, I am confused.  In PHP one can simply include or require PHP from another document file and employ it wherever you like that PHP can be used.  When I try to do something similar with xregexp.js I inevitably fail and am told that the script cannot be found.

Now, I have node and npm installed above my domain folders so that it can be used with all of my domains.  Simply I do not know how to access the modules that I install with npm, and I was hoping to install several more.

QUESTION:  How does one access node modules that are installed with npm, but reside above the domain folders in which the Javascript that is targeted to employ them resides?

Roddy

Edited June 19, 2019 by iwato

[justsomeguy]

When you build a project you tell it which modules to use, and it builds everything together.  That's one of the things that Node Package Manager does.

[iwato]

So, if I have understood correctly, there is no way to interact with one's site until the project is finished, whereupon one transfers the completed project to one's site with all of its modules as a completed package.  Is that it?

Roddy

[justsomeguy]

Yes,  you build the project from your source code and the build process produces a single file, usually, for your application that includes everything it needs plus its own code.

[iwato]

How are you using the term

Quote

source code

in this context?

[justsomeguy]

I'm using source code as it's normally used by programmers.  You write Javascript source code, and then use NPM to build the final package, just like you would use a compiler to compile C code into an executable.  Here's the source for one of my components that's using react:

import React from 'react'

import StudentLayout from 'components/StudentLayout'

export default class MainAppLayout extends React.Component {
    constructor(props) {
        super()
        this.state = {
            LMSuser: props.LMSuser
        }
    }

    render() {
        return (
            (
                <div style={{margin: "10px"}}><StudentLayout LMSuser={this.state.LMSuser} /></div>
            )
        )
    }
}

It imports another package and another component, and exports a class for this component with constructor and render methods.  NPM takes all of the source code for all of the components and packages you're using and produces a single deliverable that is the actual runnable Javascript for the project. Here's the source code for another component:

import React from 'react'
import $ from 'jquery'

import { Link, IndexLink } from 'react-router'

import Msg from 'components/Msg'
import Messages from 'components/Messages'
import PageNav from 'components/PageNav'
import Footer from 'components/Footer'
import MainAppLayout from 'components/MainAppLayout'
import getMuiTheme from 'material-ui/styles/getMuiTheme'


import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card'
import FlatButton from 'material-ui/FlatButton'
import defaultTheme from 'themes/defaultTheme'
import muiThemeable from 'material-ui/styles/muiThemeable'
import CircularProgress from 'material-ui/CircularProgress'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import Chip from 'material-ui/Chip'
import Avatar from 'material-ui/Avatar'
import SocialPerson from 'material-ui/svg-icons/social/person'
import { white } from 'material-ui/styles/colors'


import * as Actions from 'actions/Actions'
import Store from 'stores/Store'
import MsgStore from 'stores/MsgStore'


export default class Layout extends React.Component {
    constructor() {
        super();
        this.state = {
            apiAvailable : true,
            haveUser: false
        }
    }
    componentDidUpdate() {
        //componentHandler.upgradeDom()
    }
    componentWillMount = () => {
        this.getLMSUser();
    }
    getLMSUser = () => {
        this.userXHR = $.ajax({
            method: "POST",
            url: "lms.php",
            dataType: "json",
            data: {mode: "getUser"}
        }).done( (data) => {
            if (!data.username) {
                MsgStore.createMsg({message: 'You are not logged in.', type: "popup"})
                return;
            }
            Actions.saveLMSUser(data)
            this.setState({LMSuser: data, haveUser: true})
        })
        .fail( (xhr, status, err) => {
                if(err != 'abort'){
                //MsgStore.createMsg({message: err})
                alert('Error contacting server')
            }
        })
    }
    handleSubmit = () => {
        let api = typeof(Novus) !== 'undefined' ? Novus.api.base.split('/rest')[0] : null
        window.location.assign(api)
    }
    render() {
        let displayWidth = $(window).width()
        const theme = defaultTheme()
        const { apiAvailable, haveUser } = this.state
        const styles = {
            loader: {
                width: '100%',
                textAlign: 'center',
                marginTop: "400px",
            }
        }

        return (
            (apiAvailable && haveUser) ?
            <MuiThemeProvider muiTheme={getMuiTheme(theme)}>
                <div>
                    <PageNav muiTheme={getMuiTheme(theme)}/>
                    <MainAppLayout muiTheme={getMuiTheme(theme)} LMSuser={this.state.LMSuser}/>
                    <Footer muiTheme={getMuiTheme(theme)}/>
                    <Msg displayWidth={500} />
                </div>
            </MuiThemeProvider>
            :
            <MuiThemeProvider muiTheme={getMuiTheme(theme)}>
                <div style={styles.loader}>
                    <div style={styles.loader}>Veeco FSA Tool</div>
                    <Msg />
                </div>
            </MuiThemeProvider>
        )
    }
}

If you just tell a browser to load that it's not going to know what you're doing.  That's the source code, not the built project.