I am new to reactjs. I created a basic react app using create-react-app boilerplate. I prepared the build by running the command npm run build.
Now I want to host the build folder. Which is better and why.
Please let me know if any better and easy option available as I am new to this.
Whatever is available to you will do just fine. When you run npm run build static it will create static files that you are able to host from whatever web-server you want. If you are curious about performance numbers, they are negligibly different in this case. Just choose whatever platform you feel most comfortable with.
Related
Basically what I have is my frontend (Vue) and my backend (Node.js and etc.). By following a guide, I've built the frontend for production using npm run build. I got a bunch of files in a build folder I setup within a previous step. These files were then moved to a folder in the backend. It works, but it's more a demo than anything else, and the frontend and backend will have to be modified more as I continue.
I'm just wondering if and when I edit the fronted more (let's say, when I add a new page) am I supposed to go through this process again? So I'll modify the front end folder, build that, move files, etc.
Thanks.
Yes, definitely.
If we are in a development environment, we use npm run dev or yarn run which upholds the development environment running and updates the browser whenever any modifications inside the code happen. We don't use any final build in the development environment because we make code modifications so repeatedly that it would be a sore process to make a build after every modification and check the results using that build.
But, the production is distinct from the development environment. We deploy the only code which is bug-free, entirely working, and ready for users to use. Deploying to production means all changes have been made, and the final code is ready to be deployed. So, we make a final production build and deploy it to our server.
So, don't panic to deploy to production every time you make a small change in the code. First, complete your all changes, and test the changes in the development environment, if everything is working correctly then only create a final production build, and deploy it to the server.**
I hope this helps.
I have vue project which published on Digital Ocean. The main problem is when i make some changes on FileZilla it is not affect on website. How can i solve this issue?
This is not an issue per-se. This is just the way how modern web development works. Vue.js (but also Nuxt) is using a bundler right now (Webpack, Vite are the most common), hence to go to production it needs to be bundled each time you push something to it.
If you upload something via FTP or SSH and edit some source code, a bundle step will be required in order to get any changes on the actual webapp.
Backend languages may not need that, for example you could SSH into a server and change some .php file, if you F5 the page it will be updated in real time. But this is not how frontend JS code works, it needs to be optimised.
Another thing, sending code via SSH/FTP is not really a good workflow because it is not easily trackable, no version-controlled, will not trigger any build flags in case of an error etc...
The best approach is to have a git repo + some build step included in some CI.
A common platform for it is Netlify, you connect a Github repo, you tell which command to use to build the project and each time you push some code, it may do some checks/tests/optimizations/etc... via Github Actions before being released automatically to production (updated on your webapp).
This workflow have a lot of benefits as one may tell but is also de-facto, the official/regular approach for modern Web development on the frontend.
We have extra config for our app to run inside app.config.ts and some environment variable validation in order to populate it. expo install, as I understand, reads some of the core expo config in order to make some decisions on library versions. It does not need the full configuration with the extra params. We have no way of detecting expo install vs normal build at runtime (i.e. it does not set any specific environment vars, or anything).
For our application, rather than using dotenv at runtime we simply require certain environment variables to exist.
Our local development scripts to start the server use dotenv-cli to populate some environment variables. Our CI builds rely on the environment variables set in CI. For this reason we always validate the required environment variables and don’t pre-populate anything.
We would either like to have a pre-script hook so we can make the same dotenv call before expo install happens, or a way to detect inside app.config.ts that expo install is running (some env) so we don’t need to expose full config.
Does anyone know how this could be achieved?
FYI this exact question was raised via the expo forums over a week ago, but there does not seem to be enough attention/activity there: https://forums.expo.dev/t/expo-install-does-full-config-load-including-extra-any-way-to-pre-hook-and-set-env-vars-or-detect-expo-install-at-runtime/62123
I am unable to see the navigator.virtualKeyboard API present in create-react-app production build, but it is present in local development. What settings do I need to tweak to enable it in production build?
Please head to:
https://w3c.github.io/virtual-keyboard/
I´m not a React User, but I think that´s not your problem here, but this:
maybe your dev/prod systems have different setup.
I have made a few applications (using webpack, babel, react, d3, npm etc.) that uses very similar charting code. I am in the process of splitting out that charting code into an npm package which multiple apps can then import.
To test this out, I've embedded a demo app inside my chart libraries project directory and install the library at its file path. Now, presumably i'll be able to install this in depending apps A, B and C and so on, and I can change my chart libary and all apps will reflect these changes.
The first thing I noticed is that I now have to cd into my chart library and run npm run build (which runs webpack) any time I change something, and then cd into the depending app I'm working on and run npm i. This can perhaps be improved by using npm link but there are issues there as well (such as versioning and deploying to my server). So my first question is about what a decent rapid development approach looks like now that my charting code is in a separate npm project.
The other problem I've noticed is that I've lost two valuable features with respect to my chart library code. Code completion in VSCode and debugging in chrome dev tools. I'm not sure why VSCode code completion has stopped working. And for debugging, how would i be able to debug both my depending app and the library its depending on at the same time in chrome?
I would use npm link. It's immensely helpful when working on a library and its integration side by side.
Check the Chrome settings to make sure it's not instructed to skip libraries in Settings -> Framework Blackboxing, see e.g., http://blog.edenhauser.com/tell-chrome-debugger-to-ignore-libraries/.