iwato Posted June 19, 2019 Share Posted June 19, 2019 (edited) 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 Link to comment Share on other sites More sharing options...
justsomeguy Posted June 19, 2019 Share Posted June 19, 2019 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. Link to comment Share on other sites More sharing options...
iwato Posted June 20, 2019 Author Share Posted June 20, 2019 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 comment Share on other sites More sharing options...
justsomeguy Posted June 20, 2019 Share Posted June 20, 2019 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. Link to comment Share on other sites More sharing options...
iwato Posted June 21, 2019 Author Share Posted June 21, 2019 How are you using the term Quote source code in this context? Link to comment Share on other sites More sharing options...
justsomeguy Posted June 21, 2019 Share Posted June 21, 2019 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 comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now