I am working on a React project in order to build the user interface of a Nextcloud application. So far i used webpack to bundle all the code and use a single script file to inject in my Nextcloud application and it works.
The problem is the development experience, i would like to have features like auto-refresh of the page on file changes, so I am asking: Is it possibile to serve with webpack-dev-server a static url as localhost:8080 where there are my containers running nextcloud and refresh it everytime webpack detect a change?
thank you.
You might want to Hot Module Replacement.
First, install Hot Module Replacement plugin, then configure your webpack as this guide
Related
i created a create-react-app and want to use filetypes like webp or mp3.
When i run my application on localhost via npm run start everything works fine, but after my deployment on my server (which uses npm run build and delivers the build folder) it doesn't load filetypes like mp3 or webp anymore. Why is this happening? i think its any simple configuration in react or anything like that, but i cant solve this problem by my own. Thanks for your help.
The issue may be with typescript (if that is what you're using). Typescript will convert .ts and .tsx files to .js, but not move most other files over to build. If they are in a separate assets directory, you have to ensure that gets deployed too. If this is the issue, you have a few choices.
You can manually move the files over to build as a 'post' deploy step (using say, a shell script).
You can use a bundler like webpack to help you maintain the references to those other assets and bundle them correctly.
I finally found the problem that caused this behaviour. Amazon AWS Amplify creates a rewrite rule for single page applications (SPA). You can find this setting under Rewrites and redirects in your Amplify application settings. There you will find a rewrite rule with following source address:
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
...change it to...
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json|mp3)$)([^.]+$)/>
... for example, to allow mp3 files. This is also important to allow webp-Images or woff2-Fonts.
I created an ReactJS APP. I want to deploy this app in hosted server. So i made the changes as
In package.json add "home": 'https://ww.domain.com/ReactApp"
Installed react-snapshot plugin. Added "&& react-snapshot" in build line in package.json. Replace React-Dom to react-snapshot in index.js.
Build the project and copy the files and folders inside build and paste inside server inetpub/wwwroot/reactApp folder.
Run the application favicon displayed in tab. Blank white screen. No error in console.
Anybody please suggest what mistake am i doing and please suggest quick solution.
Thanks
You can try the following steps to fix your question:
1.Please check your Webpack’s publicpath setting. There is the publicPath setting in your Webpack configuration to tell an app what its root path is. please make sure it is set correctly, it will base links like above from that URL.
2.If you’re using create-react-app, you won’t have to deal with Webpack configs. The way how create-react-app has it’s webpack configuration set up, this will replace the publicPath with the correct base URL for your app. Now your app it’s base URL, run npm run build again and copy the app to your web space to find your app up and running.
I built an app in React with create-react-app. Just JavaScript, CSS, HTML & React. I ran npm build then deployed the app to Netlify.
I want to go back and edit some CSS. So, I cd into the directory from my laptop and deploy on localhost:5000. I open VS Code and make changes however none of the changes are reflected in the browser # localhost:5000.
When I was building the app, the way I had it set up allowed me to view each change immediately in the browser when I save the file.
Are files editable after you run npm build? What am I missing here?
When you run a build on a react app (or any other app) code will be converted from es6 to es5 and then probably minified (depends on webpack config) so code is unreachable and you need .map files to debug code in production environment.
So the most clean way to act on deployed code is to make a new build with updated features and deploy again the frontend.
In local development react boilerplates usually make intensive use of hot-reload, a plugin that allow code to be hot replaced while app is running.
Built application instead load chunks of JS files once and CACHE it. So in order to see your changes you have to clean cache or force a refresh (home+F5 on windows, CMD+R on OSX) to be sure that your changes are visible.
Despite this I discourage to edit the build files. When you have to update the code stay on development mode, before deploy, build your code and test it live.
You could create some files outside the src folder and access them with fecth from app.js or even import them from index.html ... so if you wanted to change something you could do it without having to do a build again.
I come from a background in Angular, but I wanted to start learning React. I want to make a React front-end for a nodejs Express web service.
In Angular, I could simply build the source code into a static folder with a standard index.html, and it can be deployed on any web server. With React however, every tutorial I see is about running React in its own server using create-react-app and npm start.
I know you can also just use script tags to import the React framework in a static page, but then you can't use JSX syntax, and I would like to. Is it possible to simply build a React project into a static folder with an index.html that can be deployed on any web server?
Yep, you can do what you're describing. If you want to use JSX syntax, you'll need Babel, which transpiles it into standard JavaScript.
You can avoid the complexities of setting it up by using create-react-app to create the app, then running npm build instead of npm start. This will compile everything into a build directory, complete with index.html.
CRA uses its server for development purposes. You don't need CRA for using React of course. But, as your app getting bigger and bigger you will need some more extra tools. For example you want to see your code instantly without refreshing your browser. Here comes the dev server and hot reloading.
CRA uses Webpack behind the scenes. It is a great tool for bundling (obviously) all your files (including css), minifying, uglifying, optimizing your code etc.
For simple code or testing purposes using one file and attaching React and Babel to your file could be enough but for real apps you will need more. Either you will use something like Webpack on your own or you will use CRA and let it do all the extra stuff for you.
I’d like to use HMR with my React Electron app. How would I do that? Do I need web pack? How do I integrate it with Electron?
You use a webpack config just like you would with a normal web app.
The settings depend on wether you are using react-hot-loader 2 or 3 (beta)
You then set the src attribute in your index.html file to wherever your webpack dev server is serving the bundle from.
Usually: localhost:8080/bundlename.js
Here is the walkthrough for react-hot-loader 2:
http://gaearon.github.io/react-hot-loader/getstarted/