I am working on a reactJS application. When I test the app on my development machine I launch the application with npm start. Based on my webpack.config.js file, the entry into my application is index.js. I would like to launch my application and provide it with two pieces of data, similar to the way you can start Word from a command line and pass it parameters instructing it to open with a particular word document.
Thank you.
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!
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 have built a single page web application using react as part of an assignment.
i have created build version of it using serve -s build.
now my entire application takes around 200MB.
how do i share my application to the person who gave me this assignment so that he can check my work and output?
do i have to send him entire application folder(200MB size)?
or is there a way to send few files which will be enough for him to run the app.
please let me know possible ways of sharing my react application with him.
i figured out that only build folder(20MB) is enough run my app.
i copied build folder into another new folder("deploy-app").
now i opened "deploy-app" folder in VS code and ran following command "serve -s build" and it started working without any problems.
Is the application 200MB+ because of the dependencies/node_modules?
You can probably exclude these as they should be in your package.json file, i.e. they can be requested again if required.
Then you can send the source code and your built version to him.
I'm developing an app locally using Go and React with a project structure that looks somewhat like this:
/reactApp
/main.go
/api
/reactUI
While I am developing locally I am using the gcloud cli tool to run the Go code, and I'm using Node to run the UI. I need to handle CORS of course, but otherwise this works fairly well. The problem is there are too many files in the /reactUI directory for the gcloud cli tool to monitor them all. This means I need to manually start and stop the server every time I make a change to the Go source code.
The reactUI directory was created using the 'npx create-react-app' command. Since I'm running the react part of this app locally using node (and that handles file monitoring and auto-updating just fine), how can I get the gcloud tool to ignore the reactUI directory?
Basically I just want the gcloud tool to monitor the API part of the app, and not the UI part. If I make a change to the API part of the app the gcloud local server should automatically recompile and restart.
With https://issuetracker.google.com/issues/35895450 fixed the development server is supposed to not monitor changes in the files/directories matching the patterns specified in the skip_files section of the app/service's .yaml file.
So you can try to add a skip_files section to the go app's .yaml file specifying the patterns for the files/directories you want ignored. Be careful to also add the default patterns (otherwise you'd lose them).
I am building a sample react native application. Currently i am running it using the node server.Node server is serving the js file.
You can see this in following screenshot:
I want to shift to the option2, for this, if there is any change in the js file, i need to run the curl command manually.
Is there any alternative for this?
AFAIK there's nothing in place and this is work in progress. See:
https://github.com/facebook/react-native/issues/12
We plan on putting in some sort of build step that "compiles" the JS
source directly into a resource file in the app bundle. Obviously in
production you wouldn't have a server running nearby.
There's another bit of discussion here.
At the moment I think you're stuck with the curl option.
All this does is packing all your JavaScript together and writing it into a single file.
Option 1 has a small http server running, providing the latest packed file when you request it.
Option 2 takes the file from the local disk.
You can setup a tool that looks watches your project files and repacks everything if you make changes.
You can do this by yourself, using the packaging tool shipped with react-native (react-native bundle [--minify]) and re-run it everytime things changes using gulp (and gulp-watch).
Also you can use webpack as your packaging tool and use the --watch option. (see example)