I have a React App (Typescript templated created using create-react-app) which emits all the changes to localhost:3000 when I execute yarn start. All local changes are immediately served with hot loading.
I have another local dev server running which consumes this app's react files in /build (output from yarn build).
I would like to see all my compiled changes emitted by yarn start be consumed by another server running locally. in other words, I want the yarn to start to emit the change to my file system so they can be served.
I tried ejecting the project and changing configuration files to emit to the build directory with yarn start but that does not work.
I have also tried switching my project to https://neutrinojs.org but that may not be an option for me at moment.
Could someone suggest what approach should I be taking to achieve this.
I found the solution.
I used https://www.npmjs.com/package/cra-build-watch which serves the purpose
Related
Primarily, I'm trying to integrate a react application (Created and build separately) with Drupal.
Problem
Unable to install private package from Bitbucket using npm install git#bitbucket.org:user/shared-package.git in Drupal app, because no package.json found.
Implementation Details
Development Environment
To achieve this in development environment I run npm run build which produces the following content in dist directory.
Not going in the details of what are the roles of other files but to make the things work, I just need to copy bundle.js file and paste it inside a directory under app/web/themes/custom/abc_themes/js/.
This is okay for development environment to copy a folder from one project and paste it into another. However, for production environment it' not viable.
Production Environment
In production we thought to create a private package on Bitbucket, where through Bitbucket pipelines on every commit we trigger a build and push that build 's result into a separate repo (i.e. private package).
Here is the content that is pushed to the so-called private package. Since it's the entire react application (not a library) therefore when it builds it creates compiled js and doesn't contain packgae.json.
Now if I try to install this package throught npm install
code ENOLOCAL
npm ERR! Could not install from "bitbucket.org:user/shared-package.git" as it does not contain a package.json file.
That is obvious but to solve this I can't convert my project into a library. Because even if I convert it to a library, Drupal needs a build js file at the specified directory to work.
Expectation
Want to know if there is a way I could install that private package (that doesn't have package.json) into Drupal application.
OR any other way around to achieve the same.
NOTE: I know one solution could be to host the build file at some CDN and pull it from there. But problem is, the Drupal app might be running behind a corporate network and users won't be able to access the internet openly. Therefore, we want to make the react app a part of build process, so once Drupal is served, react application would be a part of it already. No loading at runtime.
I'm new to yarn, nodejs and react apps. I've tried running the Sizzy app and it works on my local XAMPP server if I first run yarn start in the cmd terminal and then access via http://localhost:3033, but after a while I have to rerun the same command. I've tried yarn build and then navigating to the build directory but that just loaded a page with a header, it didn't have the same functionality. And the contents of the build directory looks very similar to the contents of the public directory anyway.
I've had a look at this SO post and this one but still unsure why I need to run yarn start everytime.
UPDATE:
I'm still not sure how node, react, and electron fit together and why each is required, much research and learning still to do! Rather than a 'react app' I believe I'm looking at an 'Electron app'. I think if I run the command npm run package-win then I think I should get an exe file and some dlls. But how to instead setup for running on an Apache web server without having to start using the command line, or would you just have to build it with different architecture?
Starting to get a vague understanding from reading this.
If you used the npx create-react-app <app-name> then you just have to change the "start" script in the package.json file as "serve -s build". Run yarn add serve to add For deployment, Heroku is a good choice. Create a Heroku app and connect your git repo to the newly created app. Then go to the deploy tab and deploy your branch.
create-react-app seems to start localhost server at npm start.
(npx comes with npm 5.2+ and higher, see instructions for older npm versions)
Then open http://localhost:3000/ to see your app.
When you’re ready to deploy to production, create a minified bundle with npm run build.
https://facebook.github.io/create-react-app/docs/getting-started
Why do I need to bring up a server just to run JavaScript?
What are the differences, advantages, and disadvantages of opening the build result file directly in the browser?
Also, is this true for other frameworks regardless of create-react-app?
I read React's repository etc on this issue, but there was no topic on this issue.
One of the main advantages to create-react-app starting a localhost server is hot reloading.
When you write most modern JavaScript, including React, your code needs to be transpiled (essentially converted to a different version of JS) before the browser can understand it. This is called the build process, which takes all the files in the src directory and bundles them into a single static JS file.
You could do this manually with npm run build, which creates an index.html that you can open in a browser without running a server. But you have to go through 2 part process to see your changes: rebuild and then reload the browser to see your changes.
create-react-app is built so that it watches for changes in your files, updates the built JS whenever you hit save, and then restarts the server, loading your changes automatically.
By running a server on localhost, create-react-app can update your page instantly every time you save, without you manually rebuilding OR refreshing the page. Hot reloading!
I have a working react.js application, which works using npm start (app built using create-react-app).
When I try to run npm run build, it builds the application. I serve it using
serve -s build -l 3000
It loads the first dashboard page but does not communicate with the server. I have put console.log statements in server to check for any requests coming in, but it never logs anything... which means the client does not talk to the server.
I have proxy statement in package.json to connect to server on port 3300. This works in development mode but in production mode it seems to not pickup the proxy settings in the package.json.
Please guide... this is my first time switching to production mode... any guidance on switching to production mode would help.
BTW I use react-loadable as well...
The proxy field in package.json is only used in development by webpack-dev-server. You can learn more about this here
Thanks for all the help guys....
Finally, I understood that "npm run build" just creates the static files to deploy. But how to use it, is our hands. :)
I copied the build folder inside the /server folder and added the following line in my root server.js file itself. Basically, served the static files from /server/build folder and it all works beautifully.
app.use('/', express.static(__dirname+'/server/build'))
Thanks for the support. :)
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.