create-react-app build deploy on LAMP/XAMPP/WAMP create-react-app build deploy on LAMP/XAMPP/WAMP apache apache

create-react-app build deploy on LAMP/XAMPP/WAMP


By default, your react project is built to be deployed directly into your server 'www' (root) folder. Hence you may copy the contents of your project 'build' folder to the WAMP 'www' folder and then go to http://localhost/ in your browser. Your project will be displayed.

Alternatively, you may want to use a WAMP root subfolder, e.g. 'www/react/'.In this case add to your package.json file a homepage key:

"homepage": "http://localhost/react/",

Then build your project again:

npm run build

Finally, copy the contents of your project 'build' folder to 'www/react/'. To display your project visit http://localhost/react/

You may get more information in How to deploy a React App on Apache web server


Create a folder in htdocs (xampp) named react.

add "homepage": "./", (for relative path) or "homepage": "http://localhost/react/", (absolute path) in package.json file.

And on App.js file

<BrowserRouter basename='/react'>  <Switch>    <Route exact path="/">      Hello    </Route>    <Route path="*" render={() => "404 Not found!"} />  </Switch></BrowserRouter>

After configuring package.json and App.js run build command

npm run build

Then copy all files from build folder to react folder in htdocs.

And also create an .htaccess in react folder in htdocs.

Options -MultiViewsRewriteEngine OnRewriteCond %{REQUEST_FILENAME} !-fRewriteRule ^ index.html [QSA,L]

If your sub folder name is different then replace /react with your folder name.

Example - rename /react from

"homepage": "http://localhost/react/"  <BrowserRouter basename='/react'>

to

"homepage": "http://localhost/your_folder_name/"<BrowserRouter basename='/your_folder_name'>