I have 2 react applications that I am trying to run locally.
For example:
I have application number 1 that is login application that run on localhost:3000
I need application number 2 to run on localhost:3001/portal <= this is a very simple application that does not even have a router baked into it.
My current solution is:
In application number one is:
BROWSER=none
HOST=localhost
PORT=3000
no homepage property in package.json file.
In application number 2 I go into package.json file and add homepage property. I set up my .env file as:
BROWSER=none
HOST=localhost
PORT=3001
Currently application does get locally deployed for development on https://localhost:3001/portal. However, when I navigate to it all I see is a blank page. I feel like I am missing something and application does not know where to serve files from.
What the set up should be to run 2 applications with on of them on a sub directory?
After longer research I found a thread where its explained in very detail how to accomplish that.
How should I configure create-react-app to serve app from subdirectory?
You should set up an environment variable in youe .env file like so:
HOST=localhost
PUBLIC_URL=/your-subfolder-name
PORT=3000 <== (this is optional, if you want your application to run on port. In my case I was running multiplle applications there for each application had different port).
After variables are set up and you are using any type of router, you will need to calculate your routes based of that relative paths. To get your default paths you can do it by doing so:
process.env.PUBLIC_URL; <== (This will return your variable value that you set up in .env file).
Because I am using rescripts package I had to change react-scripts package. version The minimal version I had to install in order for react to read PUBLIC_URL variable from .env was 3.4.1. The reason solution above did not work for me because rescripts version was lower than 3.4.1.
"react-scripts": "3.4.1",
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 have an app ready for production. For it to work, each client needs to set a unique url to access their data. How would i prepare the app for making it easy to add a url as an access point to the clients?
Would a correct way to do this be to add it in the manifest.json file and somehow reference it from there? (Until now in development i've only used a global URL in a js file)
You need to install the package dotenv package and create a .env file in your root directory which should contain your environment variables.
Assuming that the URl you are referring to is http://localhost:3000/some/url on your localhost, then your .env file might look like:
MY_URL=http://localhost:3000/some/url
Then in your react application, you can get the value of MY_URL by doing:
const url = process.env.MY_URL
Note that if you are using the create-react-app package, then you do not need to install the dotenv package since it already comes with the create-react-app package. Also you need to change it:
REACT_APP_MY_URL=http://localhost:3000/some/url
Also make sure to add the .env file to your .gitignore file so that you do not push it to your repo.
Assuming that you are deploying your application to Heroku. Heroku provides a simple interface which allows you to add your environment variables which looks like:
That's it.
Maybe you could store them in environment variables?
that way you can always edit them later without having to change components.
I have been developing a small app with create-react-app and a few other libraries i added. Given the planned architecture and some tests i'd like to run with react-router, i would like to be able to run my app locally using a domain mame in the url, so that instead of
localhost:3000/
it would be
somedomain.com
I have tried a few things like ejecting ceate-react-app but im not sure how to modify the webpack config to change the public path, or how to set up some sort of proxy on my machine so somedomain.com would be equivalent to typing localhost:3000
I'm not sure what the correct approach is and i cant seem to find any reliable information yet.
As well as changing your /etc/hosts as advised above, if you want CRA to know about the new host name, the HOST env var should give you what you want.
E.g. (this can go into your package.json under scripts/start)
HOST=somedomain.com react-scripts start
That should start your CRA-based dev server, listening at that domain name, and it should open/refresh a browser tab pointing there.
Edit: docs on this and other env vars that CRA uses.
Combining some of the other answers:
Step 1: on your local machine add this line to your etc/hosts file:
127.0.0.1 somedomain.com
Step 2: in your react app directory .env file, add:
HTTPS=true
HOST='somedomain.com'
Step 3: (Depending on whether you're running a backend) you may need to add somedomain.com as an allowed domain
You can do it by updating your hosts file with the following entry
127.0.0.1 somedomain.com
and then use somedomain.com to access your site
But if somedomain.com happens to be your actual host address then you will have to revert it back when you want to connect to the actual hosted somedomain.com
You can find more info about how to edit your host file here: https://www.siteground.com/kb/how_to_use_the_hosts_file/
There a similar answer which you can find here: Assigning a domain name to localhost for development environment
you can change the port by adding
"scripts": {
"start": "set PORT=8080 && react-scripts start"
}
but there is no other way to change the IP address when you are developing locally.i also tried to do that.
I am trying to setup my react application on github pages with uses rekit. There are no errors but the build is empty. Standard react create app works fine with gh-pages but application created using rekit does not.
By default Rekit builds the project into the "build" folder, have you checked if it's empty? If not, you can verify it by the default build server at http://localhost:6078 by default.
Another possible reason is, Rekit uses React Router, when uploaded to gh-pages the root path is like "http://supnate.github.io/prj-name" but the local dev server may runs at root path "/". If so, you may update "src/common/routeConfig.js" to set the root path to your project name. And you need to test it at local with "http://localhost:6076/prj-name".
I am deploying a website that will have a few react projects that were built with create-react-app. Each project will be on its own webpage: e.g.: mywebsite.com/project1, mywebsite.com/project. I am setting up an nginx reverse proxy on an Ubuntu server (which I understand how to configure), but I am not sure how to specify port numbers for each of my create-react-app projects so that each of them has a unique port. Can anyone shed light on how to do this? Thanks!
PS - I have seen threads such as this one - How to specify a port to run a create-react-app based project?, but I do not see how this solution can be applied in production.
The server you start with npm start command in create-react-app is webpack dev server. It only meant to use while development and you shouldn't use that in a production environment.
Instead, you can easily host a CRA app with a simple static file server which can easily configure with nginx without a reverse proxy or changing the port of dev server. You simply need run npm run build command and deploy content of build folder to the appropriate folder of your static file server. You can read more about this in the documentation of CRA.
Also, make sure that you specify the homepage in your package.json before building the project, since you are going to host your app in a relative path like mywebsite.com/project1. Because CRA assumes your app is hosted at the server root with default settings.
Hope this helps!