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",
}
Related
I have a Nuxt.js app with an .htaccess file.
The problem is that when I execute nuxt generate in the terminal, my .htaccess file disappears. What can I do to include my .htaccess file when I execute nuxt generate?
You could put your .htaccess file into the /static directory, more info on that in the doc.
That way, you will have direct access to it once pushed to production.
Otherwise, you can also use this approach if you need something more customizable.
I'm working on an online platform built on Vue CLI and i am experiencing problems with browser cache :
This is my scenario:
For each modification I make to the platform I need to build my application again (npm run build) . After that I push to a testing branch and do some other operations before going to production. At the end of the process, the old files are replaced by the new ones generated in the bundle.
And here comes my problem: when my customers go to access the platform after an update it
often doesn't load because they still have the old files in their browser's cache. Whenever
this happens, I advise them to clear their browser's cache and everything goes back to
normal, but this is quite inconvenient.
could someone give me any suggestion of what i could do to prevent this from happening
whenever i modify my platform files?
The following is the default configuration of the project generated by vue-cli
webpack.prod.conf.js:
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
You can see that the file name after npm run build has a hash value added like js/vendor.658937d99bd7b1009d76.js, so there should be no cache problem.
Then it may be that the compiled index.html file is cached on the server side, which requires modifying the server configuration to not cache the index.html file.
For example, nginx configuration:
location / {
root html;
add_header Cache-Control no-store;
index index.html index.htm;
}
This way the browser will not cache the index.html file when loading.
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
I'm trying to run the server version of TW5 as a node-webkit app. I followed the good instructions stated here: https://groups.google.com/d/msg/tiddlywiki/WRnhjD6LUPQ/Zmikdvo0QA0J
to run those files in node-webkit, the code you need is here: https://gist.github.com/Arlen22/d7ad0b6a108fa3cedf72
Open that link and copy index.htm and nodewebkit.js into the root of the tiddlywiki folder.
Open package.json, and copy the two objects in the gist's package.json into it.
Package.json already has a "main" object farther down which you will need to remove.
Drag the entire tiddlywiki folder onto the node-webkit executable.
When I do the last step I got the following errors on the Developer tools console of node-webkit:
Uncaught ReferenceError: require is not defined
Not allowed to load local resource: file:///C:/Users/.../node-webkit/TW5/index.htm data:text/html,chro…:1
The weird thing is: if I remove the index.html from the addres bar, then the TW5 folder is listed, and clicking on the index.html open the application as expected, working flawlessly. Could someone tell me where is the problem?
Thanks in advance.
The problem was at package.json. This is kind dumb, but I wrote index.htm instead of index.html. So if you are getting Not allowed to load local resource: error be sure to check your package.json for bad names.
Regards
Here is the problem: we have lots of Javascripts and lots of CSS files, which we'd rather be serving minified. Minification is easy: set up the YUI Compressor, run an Ant task, and it spits out minified files, which we save beside the originals.
So we end up with the following directory structure somewhere inside our DocumentRoot:
/
/js
/min
foo-min.js
bar-min.js
foo.js
bar.js
quux.js
/css
...
Now what we need is that Apache serve files from the min subdirectory, and fallback to serving uncompressed files, if their minified versions are not available. The last issue is the one I cannot solve.
For example: suppose we have a request to example.com/js/foo.js — in this case Apache should send contents of /js/min/foo-min.js. There is no minified quux.js, so request to /js/quux.js returns /js/quux.js itself, not 404. Finally, if there is no /js/fred.js, it should end up with 404.
Actually, I'm setting build scripts in such a way that unminified files are not deployed on the production server, but this configuration still might be useful on an integration server and on development machines.
Here is the configuration that finally worked:
/js/.htaccess:
RewriteEngine On
RewriteBase /js
RewriteCond %{REQUEST_URI} ^/js/((.+)\.js)$
RewriteCond %{DOCUMENT_ROOT}/js/min/%2-min.js -f
RewriteRule ^(.+)$ min/%2-min.js [L]
Same for css directory.
You can use RewriteCond to detect the presence of a minified file:
RewriteCond %{REQUESTURI} ^/js/(.*\.js)
RewriteCond js/min/%1 -f
RewriteRule %1 min/%1 [L]
Is it possible to change your build scripts? If so, you can configure them to minify the files and give them the same file name, but only when provided the proper flag, e.g. ant productionDeploy instead of ant integrationDeploy. That way the minification process is completely transparent to everything except the build script.