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
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 -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'>
You need to configure homepage for your build.
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
Related
I have a working Nuxt website configured using Nginx web server.
What I want to do is that I want to run some demo PHP script from a folder called demo which is placed inside root folder of the project.
Now if I access it like this: http://mywebsite.com/demo/test.php
It works fine but If I add a folder with more scripts and css files like this
http://mywebsite.com/demo/todo_list/index.php
Here the index.php is loaded with some images, css and js files. But the page on browser only executes the php code. It can't load any resources like js, css and image files.
Basically I want this folder to be independent so I can do my research work from this folder making it completely independent from Nuxt.
How can I do this?
Nevermind, I figured out.
Just had to add one more rule inside nginx config file as below
# Demo Folder
location /demo/ {
try_files $uri $uri/ /index.php$is_args$args;
}
I am trying to deploy my first application made with vue-cli,
everything works in npm run dev,
now when I build with npm run build, it created dist directory, with file structure:
index.html
static/
but every reference in index.html etc.. is to /app/static
src=/app/static/js/vendor.87e3cb
if I create a directory named app and copy static to /app than everything works.
I am obviously missing something simple.
simple enough, in /config/index.js file, I had assetsPublicPath: '/app/',
set only for build, but commented out for dev.
I am a little confused about where to build vue.js for production.
In my dev folder on ubuntu 16.04 -
I start the project
Update my files in the src directory
Then do npm build ( I have tried form both the project home page where index.html lives and the src directory)
In the dist directory I see that a new index.html and a static folder is created.
Deploy the contents of my dist directory to my public directory where normally index.html will live.
Result: I can see the page title but not the contents. My code works fine the dev environment. I am trying not to run it from S3
I'm using the latest vue-cli version 3.0.
My current issue is that whenever I run npm run build the files generated in the dist folder can't be run without a server.
I would like to be able to just open the index.html file on the browser. How do I go about doing this?
I ran into a similar issue and the following two changes helped me to make it work. Now I can just open index.html in Chrome as a file to run my SPA from file system.
In vue.config.js, I did not have a publicPath configured, which resulted in the default "/".
I had to configure it to empty string like this so that it uses relative paths:
module.exports = {
publicPath: '',
}
PS: Since Vue CLI 3.3 use publicPath instead of the now deprecated baseURL
I was using the history mode of vue-router, which does not work
on a local file system to route the paths back to index.html. So I
omitted the mode to go back to the default hash mode.
I was able to fix this issue by manually changing the url of the referenced files.
It's a bit of a pain, but this was a solution without having to mess around with the build configuration.
What you need to do:
Open index.html
Find href=/ and replace with href=
Find src=/ and replace with src=
NOTE: I was in need of this solution because I was creating a Phonegap app.
You can use the http-server module
npm install http-server -g
http-server dist/
normally the server starts at port 8080 so you can serve the build app on http://localhost:8080
I have a finished react app that works well on my localhost with npm start.
I created the project with create-react-app and used the npm run build to compile a production website.
I have the whole folder with the index.html on my webspace. (They use an apache html server).
I managed to write an .htaccessfile that loads the html correctly. Now there is only a white screen. It seems like the main.js is not being loaded into the root div.
The only error I get in the console is that the service-worker could not be installed as my request comes not from a secure origin. This should not stop the rendering right?
I am not sure what files would be necessary to show here so please do let me know what you need to see to hopefully fix the problem.
Thank you!
After Running npm run build command.
Copy and paste everything in build folder to your server.
Create a “.htaccess” file and add this snippet :
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
The application should work correctly.
maybe its because you have ProxyPass in your conf file. you need to specific the homepage of your application.
{
"name": "application-name",
"version": "1.0.0",
"description": "",
"homepage": "https://www.yourdomain.com/appliaction-context-path",
}