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

Question

How to deploy the build on Apache WAMP/XAMPP server?

I have an app created with create-react-app and I have two pages on this application

When I execute yarn start or npm start it's working fine and all the pages are rendering properly on the URL navigation or button click

I executed the build command

npm run build

It's generating all the static and index.html files on build folder.

I moved this build folder content to www of wamp folder and execute on the url http://localhost its showing only the home page. and the next page gives 404 not found error

But when I am executing the serve module of npm command it's working fine on http://localhost:5000

serve build

Please help me how to resolve this?

I have to deploy my application on wamp server all are static pages there is no rest api contents

score 9 · Accepted Answer · answered Dec 17 '18 at 13:31

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

can be done it like this too "homepage": "your_web_application" — Ajit Bhandari, Jul 17 '21 at 06:25

score 2 · Answer 2 · answered Nov 14 '20 at 06:29

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 -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ 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'>

score 0 · Answer 3 · answered Dec 11 '18 at 09:39

0

You need to configure homepage for your build.

answered Dec 11 '18 at 09:39

EltraEden

111
1
5

score 0 · Answer 4 · edited Apr 03 '20 at 17:58

0

Set the basename attribute on the .

<Router basename={'/directory-name'}>
    <Route path='/' component={Home} />
</Router>

directory-name is the folder name under your xampp htdocs folder

edited Apr 03 '20 at 17:58

Patrick Mevzek

10,995
16
38
54

answered Apr 03 '20 at 15:42

Miraj Khandaker

772
10
11

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

4 Answers4

Linked