Jump to content

Using npm Applications Client Side


Recommended Posts

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 by iwato
Link to post
Share on other sites

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

Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...