I want to deploy ReactJS App that should be run from usb stick. Is it enough to copy all files from "Build" directory to stick after
npm run build
command in terminal? It seems OK for me after I fixed some paths manually. I am asking is this metod OK or there is better way to deploy apps for such usage?!
Thanks in advance!
Yes, all files from build directory is enough to deploy a react app. it's about the web server you used for this purpose.
Read this links, may to help you:
https://create-react-app.dev/docs/deployment/
https://dev.to/xarala221/the-easiest-way-to-deploy-a-react-web-application-2l8a
Related
I want to ask on how can I host my react app. It is a 3d product configurator.
I tried to host it on AWS Amplify but the 3d models doesnt load
If you want to host an application on aws amplify you have to create a build version of your app (assuming that it works already without any start issues meaning that you have a functional react app created with the command npx create-react-app).
Usually your react app runs on local host and it's basically like a test/development version of your app. When you take it into aws it really wants a build version of your app. The build command will generate everything you need for this. Navigate to your react application folder and
Run the command
npm run build
This will create a folder that you can send to aws amplify.
When you go to the aws amplify site it'll ask you if you would like to build a website or host a website.
Select host and then it'll ask if you would like to push it from a repository like github. For now lets just skip it and keep the deployment as simple as possible. Deploy without git for now.
Next, we want to click on drag and drop so that you can manually select the file build folder that your npm run build command generated.
Look for the build folder that was generated and drag that folder into the aws area. You don't actually have to click the 'choose files button'. Sometimes the box glitches and won't let you drag anything outside of the box. So what you can do is just open up your directories and manually find that build file in your folders. Drag it from there to the aws zone at the bottom of the screen.
Give your AWS app a name and env name.
From there you can deploy. Once you deploy it'll give you a site address. Also before you make your build, be sure that all of the packages you need are installed. I had an issue where my axiom commands were not working because I had not installed it prior to pushing my build.
So if your project depends on a certain npm package to run your .gltf files make sure that it is installed on your application. You should see it inside the node modules folder (in your apps local directory not the aws one).
I think AWS uses the node modules folder to generate everything your project needs (But I am not 100% sure of this). But it didn't work prior to me installing the package and pushing the build folder again to aws via drag and drop.
There are better ways to do this but this is what worked for me! Hope this helps to at least get your site up and running. Also hope it helps with any package issues that might have been happening with your 3d models. This is about as far as I can take you. Good luck!
I've recently tried getting into the whole Node ecosystem and am trying to set up some continuous deployment for my app to AWS Amplify.
For background, my project structure looks like this:
project
public
index.html
src
App.tsx/App.js
package.json
As far as I know, this is basically what create-react-app gave me to start with, and I didn't change the file structure.
For most of my time working on the app, I've been able to go to the base project directory and use
npm start
to launch the app. This will bring me to the App.tsx/js homepage.
However, when I hosted this to AWS Amplify via GitHub, the default build settings actually point to the public directory, so the published site is actually point to index.html (which is basically just an empty placeholder).
While debugging, I ran
npm build
in my root project directory, which constructed a build folder, so now the overall project looks like this:
project
build
index.html
public
index.html
src
App.tsx/App.js
package.json
Now, running
npm start
will bring me to the index.html from the build directory, instead of App.js/tsx as it used to.
The AWS setup says that it will run
npm build
so I assume that what I've done on my local machine is mirroring what the AWS server is doing behind the scenes and explains why AWS is serving the empty index.html.
I've read a few articles and watched some videos about hosting a create-react-app on AWS, and in every version, it looks like AWS will serve the App.tsx/App.js right out of the box, rather than build/index.html, and I've not been able to find a good guide on how to configure this behavior. Quite frankly, there is an overwhelming number of similar-but-slightly-different answers for questions like this, which use different combinations of package managers, packages, hosting services, all on different release versions, with different setups, and it's very difficult for me to tell which ones apply to my scenario.
So I'm hoping someone can help straighten some of this out for me, or point me towards a good resource for learning more about this type of thing. Particularly interested in learning the right way to do these things, rather than a quick hack around whatever my particular issue is.
Some specific questions...
Is deploying things from a /build folder standard convention?
Why does create-react-app create a separate /src/app.tsx and /public/index.html that seem to be competing with one another as the app's "homepage"?
Why does the behavior of
npm start
change depending on whether
npm build
has been run?
Is the correct fix here to just insert my App.tsx component into the index.html? This doesn't seem hard, but doesn't seem right either
I have seen a lot of answers discussing tweaks to webpack.config.js to solve issues like this one. My project does have webpack installed, but as best I can tell, there is no webpack.config.js anywhere. Am I expected to create this file, or should it exist already? In either case, in which directory is it supposed to live? I've seen a couple answers saying it should be in /node_modules/webpack/, but also some saying it needs to live in the same directory as package.json
Things I've tried already: Spent a bunch of time reading through other StackOverflows and watching a few videos, but as outlined above, I'm finding it difficult to tell which could apply to my situation and which are unrelated, given the huge number of unique combinations of build/packages/platforms/versions. Also spent some time monkeying around with file structure/moving code around, but not very productively.
Eventually found my issue. In the production built version of my app (aka, /build), the bundled script created by webpack was failing in the browser because exports was undefined, so index.html was being served in its vanilla state, rather than with the TSX/JSX content. I changed the "module" property in tsconfig.json from commonjs to es6 and this fixed most of the problems.
Also of note is that the reason I couldn't find my webpack.config.js is that I had hidden ALL js files in my project, so VSCode wasn't finding it. I swapped to the suggestion from this blogpost to hide only js files with a matching TS file.
For general learning about how create-react-app works, I eventually found this page, which I found helpful:
https://blog.logrocket.com/getting-started-with-create-react-app-d93147444a27/
For the basic create-react-app
npm start
Is a short command for react-scripts start that sets up the development environment and starts your development server usually localhost:3000
npm build
After you are done developing, this command short for react-scripts build correctly bundles your app for production and optimizes the build for the best performance.
The files generated in the build folder are solely the files you serve to the public folder accessible by the public URL.
In short the files in the build folder should be copied to the public folder
AWS Amplify
Provides a CI/CD process where you don't have to set all this up by yourself, as long as you have a well-configured package.json file.
There are so many methods to deploy your react app to a production server but using AWS Amplify this link might help you out: https://youtu.be/kKwyKQ8Jxd8
More on create-react-app deployment: https://create-react-app.dev/docs/deployment/
Hi everybody im actually working for a company and they are asking me to show them my React Website while im working on it. They have a website that is connected to our GitLab Project and if i type http.websitename/folderOnGitLab it actually comes out whats inside the folder but with react it shows the code , not the website , because the only way i know how to open react app is by "npm run start" from local, i dont really know how to "append my app in that website from GitLab" . I have already pushed all my React App but i dont really know how to make that visible to everyone as a website not only as a code. The website is a website they host so is always online and is connected to the project as i said. So i kinda have all the material but dont know how to make that work. For example i have pushed Test.txt and if i type website/Test.txt it shows the inside of it , so the website works.
It depends on how your app was set up, but probably you need to run npm run build, which will package up your app to be used on a production website.
This will be in the /build folder, the contents of which can be hosted online.
I'm not sure how you've managed to get that folder working on that website, it definitely isn't best practice to have all the code hosted online like that, but for a temporary solution you can just go to http.websitename/folderOnGitLab/build and it will probably work.
In the future you want to copy just the contents of the /build folder to be visible on http.websitename/folderOnGitLab.
Edit: The /build folder will be excluded from git, don't put that on GitLab, just the other source files, as you can re-generate it any time by running np run build
You can try using heroku. Once you push to heroku, it deploys your code and provides a url which you can share. It's free.
https://blog.heroku.com/deploying-react-with-zero-configuration
Are you using gitlab pipelines?
If yes, you can configure ngrok in one of your jobs.
If someone wants to see your work, this person just need to play the job that have the ngrok tool and it will receive a custom link with the application.
To stop the app, you just need to click in the cancel button
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.
i will just start my question a little bit structured:
background information
I am developing a React App with Electron on my Mac.
The customer uses this app on Windows 7 and 10.
The app is packaged with asar on a gitlab runner within a docker
the dockerfile for the runner is from electronuserland/builder:base
What works?
If I start the App locally I run the npm build script and start electron -> The app works fine!
If I package the App locally (on my Mac) for Windows and copy the .exe to my VM: -> The app works fine!
What does not work?
If my pipeline get triggered by my commit the gitlab runner starts to run the buildscript and the package script (The same ones I run locally for packaging and running my app) The build is "successfully" completed and the artifacts are stored on gitlab.
Then I download the .exe from the gitlab artifacts on my Windows VM and install the software. This absolutely works fine. The app can start up and some functions are pretty good working.
But there is a problem with a package (or maybe some more, i do not know yet) It is the react-bootstrap-daterangepicker. It gives me an JS error with $this.$picker.daterangepicker is not a function
I googled a lot and found existing problems with the package, but I do not understand why it is working when i package the app locally and not with the runner.
I removed my node-modules completey on my local machine and reinstalled them, and it is still working fine.
Do you have any idea?
Where could be a difference between my local environment and the runner environment that can cause this kind of problem?
I am pretty stuck in this problem, and you would be my hero if you can help me to fix this!
Have a nice day!
electron-builder recommends using electronuserland/builder:wine to build Windows targets. I'm not sure if this would fix the problem, but could you try using this image instead?
electronuserland/builder:wine — Wine, NodeJS 10 and required system dependencies. Based on builder:10. Use this image if you need to build Windows targets.
For more information: https://www.electron.build/multi-platform-build#provided-docker-images