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.

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

Creating elements in Polymer 2.0 is a breeze. Simply use the `createElement` method, then seamlessly import it using `Polymer

While working on a project, I encountered an issue where I was creating and importing an element while setting attributes with data. The code should only execute if the element hasn't been imported or created previously. However, each time I called th ...

javascriptpolymer-2.x

Having trouble installing Ionic's cordova-res package

When I run the command ionic cordova resources, I encounter this error: cordova-res.cmd [cordova-res] module.js:549 [cordova-res] throw err; [cordova-res] ^ [cordova-res] [cordova-res] Error: Cannot find module 'F:\Ionic\myApp&bs ...

node.jscordovaionic-frameworknpm

Using Node to upload various large JSON files into mongoDB

Currently, I am dealing with the task of parsing numerous large JSON files into my mongoDB database. To accomplish this, I have been utilizing the stream-json npm package. The process involves loading one file at a time, then manually changing the filename ...

javascriptjsonnode.jsparsingmongoose

Learn the process of adjusting opacity for a specific color in CSS

At the moment, this is the code I'm using to apply a color to an element using jss. const styleSheet = theme => ({ root: { backgroundColor: theme.colors.red, }, }) I am interested in finding out if there is a way to add opacity based o ...

javascriptreactjsmaterial-uijss

Comparing tick and flushMicrotasks in Angular fakeAsync testing block

From what I gathered by reading the Angular testing documentation, using the tick() function flushes both macro tasks and micro-task queues within the fakeAsync block. This leads me to believe that calling tick() is equivalent to making additional calls pl ...

javascriptangularunit-testingasynchronousangular-test

Delayed Passport Session Login

Every time I try to log in, my Express app loads very slowly... I've implemented Passport and Express Validator, but there are no errors. However, the login process for some users is extremely slow. Can anyone offer assistance? Below is a snippet o ...

javascriptnode.jsexpresspassport.jsexpress-session

The value of this.$refs.<refField> in Vue.js with TypeScript is not defined

During the process of converting my VueJs project to TypeScript, I encountered an error related to TypeScript. This issue arises from a component with a custom v-model implementation. In the HTML, there is an input field with a 'plate' ref that ...

javascripttypescriptvue.jsvuejs2vue-component

Exploring Angular2 development without relying on Node.js and npm

As a newcomer to Angular 2 development, I have learned that before diving into this technology, it is essential to install Node.js for the server and npm for downloading dependencies from the official documentation. I successfully deployed my source code ...

node.jsangularnpm

Can we assume that the complexity of Below Node JS is O(n*n), specifically O(N) Square due to the presence of two For loops?

Regarding the following code snippet which contains 2 loops, is it accurate to determine that the Time complexity is O(N) Square? This assumption is made based on the structure of the code where a specific task is executed (second loop) for each element in ...

node.jsnpmdata-structuresecmascript-6time-complexity

Nextjs: where all roads lead back to the homepage

Having an issue in my app where all redirects keep leading back to the homepage. The problem seems to stem from my Navbar.js component, as shown below. Despite adding the required route in the Link tag for next-js, both client and server compilation is suc ...

javascriptreactjsnext.jsroutes

Looking to sanitize an array of objects in Node.js? If you find that manually iterating through it only returns 'object Object', there are alternative methods to properly

I have a collection of items structured like this: var data = [ { msg: 'text' }, { src: 'pic.jpg',id: 21,title: 'ABC' } ]; My goal is to cleanse the values by manually iterating throug ...

javascripthtmlnode.jsxss

Trouble receiving Ajax response

Below is the code snippet I am working on: function f(){ var value = ""; var request1 = $.ajax({ url : '/a', type: "GET" }); var request2 = $.ajax({ url: '/b', type: ...

javascriptjqueryajax

Create various designs for a section of a webpage

My goal is to create a coding playground using flex-box to position different panels. Here is an example in JSBin, with the following html code: <div class="flex-box"> <div class="col" id="html-panel"> <p>html</p> </div& ...

javascriptcssangularjsangular-ui-routerflexbox

An issue occurred while deploying Docker on Railway services: Build Error

After successfully deploying my Django project on Railway, I decided to add SendGrid mail functionality using the django-sendgrid-v5 package. Everything worked fine in the development environment, including sending emails like user signups. However, when ...

javascriptpythondjangodockersendgrid

I am currently lacking the "./bin/www" file

I'm completely new to the world of web development, so please bear with me if I don't make much sense. I've been trying to follow a guide on creating a simple restful app, but I encountered an issue when I attempted to use 'npm start&ap ...

linuxnode.jsubuntunpmbin

Is it possible to extract an attribute value from a parent element using ReactJS?

https://i.stack.imgur.com/OXBB7.png Whenever I select a particular button, my goal is to capture the {country} prop that is linked to it. I attempted the following approach import React, { useState, useEffect } from 'react' import axios from &ap ...

javascriptreactjsevent-handlingreact-props

How to pass a prop from Nuxt.js to a component's inner element

I've created a basic component: <template> <div id="search__index_search-form"> <input :bar-id="barId" @keyup.enter="findBars()" type="text" :value="keyword" @input="updateKeyword" placeholder="Search for a b ...

javascriptvue.jsvuejs2nuxt.js

Detaching the jQuery event where the context is tied to the handler

My current challenge involves removing a jQuery event with a callback function bound using this. The issue arises from the fact that .bind() generates a new function each time it is called, causing difficulties when trying to remove the event. I am strugg ...

javascriptjquery

I'm encountering an error while attempting to parse the XML file

Need help with ajax call $j.ajax({ url: "http://www.earthtools.org/timezone/40.71417/-74.00639", dataType: "jsonp", complete: function(data){ console.log(data); } }); The URL returns XML, but I'm trying to use JSONP to avoid cross-site s ...

javascriptjqueryajaxjsonjsonp

Show information in a text field from JSON in SAPUI5

How can I populate a text box with data from JSON using SAPUI5? // Sample JSON data var data = { firstName: "John", lastName: "Doe", birthday: {day:01,month:05,year:1982}, address:[{city:"Heidelberg"}], enabled: true }; // Create a JS ...

javascriptjsonsapui5