Transitioning a NPM project to the Apache server

Recently, I successfully managed to run a simple example project by following these steps:

  1. I downloaded and installed Node.js for windows x64.

  2. I then used Git to clone the project from https://github.com/BretCameron/three-js-sample.git

  3. Next, I ran the following commands:

    - npm install react-scripts

    - npm audit-fix

    - npm start

By running these steps, it initiated a server at localhost:3000 where I could view and interact with the example project. Everything was working smoothly.

Now, my goal is to transfer this web application onto a local apache server, for which I have opted to use XAMPP. Eventually, I plan on hosting it on an online server as well.

In the past, I have worked with PHP applications like Wordpress, where all project files are placed in the htdocs folder. With that experience in mind, I wonder if I should gather all Node.js files and put them in the same directory?

I am having trouble locating where npm has installed react-scripts. Can anyone provide guidance on how to transition the application from being served by the built-in local server using npm start, to becoming a fully hosted application on an online server?

javascriptapachenpm

Answer №1

Typically, running npm start launches a local server for developing your files. You can access your project through your browser by going to http://localhost:3000. Once you have finished development, you can use a script like npm build to compile your JS files into a finalized bundle for delivery. This is the distinction between development code and production-ready code. Subsequently, you can upload this bundled JS file to your htdocs directory so that Apache server can distribute it to your users.

It's not advisable to run node in Apache as it may be complex to set up and serve no practical purpose. Instead of continuously serving development code by checking for updates in JS files through a node server, it's preferable to package the code into production-ready form and serve that singular file.

The process of bundling your code varies depending on the project. Refer to your package.json file where you will find a section named scripts like the one displayed in the screenshot below. In this instance, using npm run dev activates the development mode via localhost, while npm run build compiles the JavaScript into a ready-to-upload bundle for production purposes.

https://i.sstatic.net/oXb7z.png

Best of luck with your coding endeavors!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for accessing an image in JavaScript?

Currently, I am developing a currency converter for a gaming marketplace and I would like the users to be able to generate images using JavaScript. While most of the work is completed, I am facing an issue where the images are not displaying properly and i ...

javascripthtmlbootstrap-4

Create a JavaScript array containing all the elements from a MySQL table

I am attempting to store my mysql table data in a JavaScript array. My goal is to push each element of the table into the array so that it looks like this: array[0] = [question: information01, answer: information02...] array[1] = [question: information11, ...

javascriptarraysajax

What is the best way to use JavaScript to emphasize the searched text in a textbox?

My application uses JavaScript and I am looking to both highlight the search element and keep the cursor in the textbox positioned at the search item. Can anyone suggest a way to accomplish this using JavaScript? ...

javascriptajax

The dimensions of the canvas are directly impacting the stretching of the Sprite

I am currently working on a small program to render sprites with 2D transformations. You can find the project here. The issue I am encountering is that when trying to render a 100px by 100px square, it ends up being stretched into a rectangle shape. I have ...

javascriptglslwebglshadervertex-shader

Unable to execute the node executable using #!/usr/bin/env node

I've been working on creating my own npm executable, but after installing the dependency in a different project and trying to run the executable, I encountered the following error: $ node_modules/.bin/html-linter : No such file or directory Even ...

node.jsnpm

Node.js server allows for accessing AJAX requests seamlessly

I need to send a parsed AST of JavaScript code to a server for processing, and then receive a list of completions back. However, when I log the AST to the client console before sending it, the structure appears like this: [ { "id":0, "type":"Program", "ch ...

javascriptnode.jsajax

Utilizing Material-UI Select for creating a number range dynamically

Seeking a solution to create a select element using material-ui that offers a range of numbers from 0 to 20,000,000 in increments of 25,000. Currently, I have accomplished this using a for loop. for (let price = 0; price <= 20000000; price = price + 250 ...

javascriptreactjsmaterial-ui

What is the best way to populate an array with JSON data using jQuery?

As a newcomer to jQuery, I decided to experiment with the getJSON function. My goal was to extract the "id" section from a JSON file and store it in an array called planes using jQuery. This array would then be utilized in an autocomplete function to popul ...

javascriptjqueryarraysjson

How can I position two divs side by side within an Appbar?

I would like the entire Container to be in a single row, with the Typography centered as it already is, and the toggle-container to float to the right <AppBar className={styles.AppBar}> <Toolbar> <Container> ...

javascriptcssreactjsflexboxmaterial-ui

What is the best way to set an array as the value for a state variable?

Looking at my function, I have the following situation: execute(e) { let { items } = this.context; let array: number[] = []; for (var i = 0; i < 2; i++) array = [...array, i]; this.setState( { items: array, } ) ...

javascriptreactjstypescriptjsx

What is the best way to send the index variable to an HTML element in Angular?

Is there a way to pass the index variable to construct HTML in the append() function? .directive('grid', ['$compile', function(compile) { return { restrict: "E", scope: { elements: '=' ...

javascriptangularjs

Display a specific section of an image as the background in a div, with the image scaled and positioned perfectly

Utilizing a 1900 x 1080 image within a div as the background <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <style> html,body { height:100%; } #imageHolder{ ...

javascriptjqueryhtmlcssimage

Steps for reinstalling TypeScript

I had installed TypeScript through npm a while back Initially, it was working fine but turned out to be outdated Trying to upgrade it with npm ended up breaking everything. Is there any way to do a fresh installation? Here are the steps I took: Philip Sm ...

typescriptnpmtsc

Converting a JavaScript hash into a single object: A step-by-step guide

I have an array of objects in the following format: var log=[ { billkey:"Name", billvalue:"ABC" }, { billkey:"Department", billvalue:"Computer" }]; and I want to convert it into a single object like this: var log={ "Name":"ABC", " ...

javascriptarraysobject

Troubles with creating promises in Node.js

Currently, I am facing a challenge in Nodejs where I need to execute asynchronous tasks. Specifically, I need to navigate through all levels of a JSON object sequentially but synchronously. I am experimenting with the following code snippet, which is a si ...

javascriptnode.jspromise

Can a File Object be transmitted to an AWS Lambda function via API Gateway using JavaScript?

Can a JavaScript File Object be passed from a browser to AWS Lambda via API Gateway (ultimately to S3)? I am working with TypeScript and React. Environment Frontend TypeScript React AWS Amplify (for API module) Backend(AWS Lambda) Node.js Expecta ...

javascriptreactjstypescriptaws-lambda

"I am trying to figure out how to set a link to an image using JavaScript. Can someone help me

I need help figuring out how to insert an image or gif file within two inverted commas '' in this line of code: _("status").innerHTML = ''; (line number 13 in the actual code) Your assistance with this question would be greatly appreci ...

phpjavascriptauthenticationloading

Iterating through children of the target element using the .each() method in jQuery

Currently, I am looping through the elements and extracting the src attribute from the child element. This is the snippet of HTML code that I am working with: <noscript data-alt="super awesome"> <img src="http://farm9.staticflickr.com/8235/85 ...

javascriptjqueryhtml

Enhancing the style of child elements in jQuery using CSS

My goal is to create a popup that appears upon mouse hover using jQuery and CSS. The code functions properly, but I'm encountering difficulty adding CSS to the child elements within the popup window. Below is the jQuery code: $(document).ready(fun ...

javascriptjqueryhtmlcss

Using Node.js to create a RESTful API that pulls information from MongoDB

I am currently working on creating a REST API using Node.js to retrieve the last N rows from a MongoDB collection. Here is my current code snippet: var express = require("express"); var app = express(); var bodyParser = require("body-pa ...

javascriptnode.jsmongodbrest