I'm newbie in react and I would like to know if it's possible to modify the url by default http://localhost:3000 to http://whatever.local:port_number where port_number could be whatever port.
After install react, I have modified my package.json and add this line before dependencies:
"proxy": "http://localhost.example:3000/"
But when I start the project with: npm start the url opened is http://localhost:3000 and not http://localhost.example:3000.
What can I do that my project start with http://localhost.example:3000 instead of http://localhost:3000?
Edit I:
I have created a .env file with HOST=http://local.example:3000 and I've got this error:
Edit II:
It doesn't work to me :(
.env file
hosts file
ping to new host
You can create an .env file with the key HOST=localhost.example it should solve your issue.
in your package.json after name or version, you need to set "homepage":"http://localhost.example:3000" (it wouldn't work !),
but if you wanna change your url after http://localhost:3000/.... you should write like: "http://localhost:3000/home (or your favorit name)"
Related
I want to use an API key for one of my frontend components, but I can't seem to get require('dotenv').config() to work. It works perfectly fine in my backend. Do I need a relative path for it to work?
My file structure is
client
-src
--components
---component.js
server
-server.js
.env
(so require('dotenv').config() works in server.js, but not component.js)
I have a public key for my frontend and a secret key for my backend both in .env. When I try console.log(process.env.REACT_APP_FKEY) to check my public key, I get undefined.
Any help is appreciated!
React cannot access files out side the react project which I assume is client. You can create an env.local file in your client folder, and inside there you want to start your variable names with REACT_APP first, example.
So new file structure
client
-src
--components
---component.js
-.env.local // inside client folder
server
-server.js
-.env //this should be inside server folder
the .env.local file
REACT_APP_FKEY=your_key
and then you can access it as, process.env.REACT_APP_FKEY
This way you do not need dotenv on your FE
I am working on a React app that's running on AWS Amplify. My React app is using the react-router-dom library to route to different components. After running amplify publish in the CLI, at the root of the app (obktraining.com) everything is fine in the browser, I can also route to other components in the app just fine as well. But when I refresh my browser while I am on a route (obktraining.com/menu), I get an Access Denied error message.
I have found other posts about similar issues regarding rewrites and redirects in Amplify, but the solutions given do not work for me.
Here is an image of the error:
My Amplify app rewrites & redirects :
Again, the error only displays when I refresh on a route (obktraining.com/menu or obktraining.com/drinks) not on obktraining.com. Is the issue being caused by the react-router-dom library or is it an issue with Amplify settings? I am not sure where to go from here.
I have been facing the same error since days.The error is being caused by the amplify settings. The solution is simple,
Edit your Rewrites and redirects by adding a new rule.
source address = </^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
target address = /index.html
status = 200 (Rewrite)
Country code can be left blank
Save and try refreshing your app again. It should probably work.
use this for reference: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
Then you can just put in (as Dhruv Godambe posted above)
</^((?!.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>
as the Source address and
/index.html as your target address
You can navigate to 'rewrites and redirects' in your app from AWS Amplify console and click on edit and select open text editor, and add this piece of code in your array(if present) else put the array braces around it.
{
"source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>",
"target": "/index.html",
"status": "200",
"condition": null
}
Reference: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
Reference:
https://docs.aws.amazon.com/amplify/latest/userguide/manual-deploys.html
I have faced the same problem.
I was using Manual Zip File (Compressed) download (wrong).
Here is how to deploy manually correctely:
Run this command
npm run build
Now a build folder will be created.
2. Compress the content of this folder
Not the content of the whole project.
You chnage directory to the build folder and Compress the content in side.
3. Upload that compressed file Inside the build directory
Now this should work just fine.
:)
The correct rule should be like this:
Source address: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
Target address: /index.html
Status: 200
I was getting the an Access Denied error message too. The error went away when I followed the documentation described in the answer above, but then I got the white screen problem described above too.
Reviewing the steps I noticed the auto-complete for the "Destination Address" listed in the "Rewrites and redirects" settings was /. When I tried using / as the "Destination Address" instead of /index.html I no longer got the white screen and got the expected page content.
Sharing what I found in case this helps others who are seeing a white screen after fixing the error with the rewrite rule described in the answers above. (Note as of Nov 2022 the "Rewrites and redirects" setting page uses the wording "Target Address" instead of "Destination Address".)
I have faced the same problem. I was zipping build folder, but not the contents within the zip folder.
Here is how I fixed it:
Run build command
npm run build
Now a build folder will be created inside your project directory.
Open build folder.
Compress the contents of build folder, and not build folder.
Now upload this new zip created from sub files and folders from build folder.
App will run fine on AWS Amplify.
I got the same error,
I zipped the build folder first then uploaded it and got that error,
but when I just uploaded the folder without zipping it, it worked fine !! weird!!
in my application I used the port 8080
I want to be able to pass a custom server hostname when running my React app to be used in the URL when I need to fetch data. The server is currently running on my local computer, so when I use fetch(<URL>).
I've been using "http://localhost:...." which has worked perfectly. But I want to be able to have to pass a custom host name, such as my IP address, to be used in the URL (i.e., http://ipaddress:...).
I've tried starting my app like this:
serverhost=ipaddress npm start
And then in my package.json file
"scripts" : {
"start": "react-scripts start $serverhost"
}
And in file start.js I can access process.env.serverhost, but I want to be able to access the hostname in the browser for my actual fetch calls. I don't want to set the hostname in "config" in package.json file or in an .env file, because it has to be able to change (I'm under the impression that this isn't possible). I just want to be able to access the server hostname given as an argument in the command line in my source files.
(I read somewhere about doing
REACT_APP_MY_VAR=test npm start
and then accessing it as
process.env.REACT_APP_MY_VAR
in the source files, but when I tried to fetch(<URL>), I got a bunch of failure to parse URL errors.)
I tried using REACT_APP variables and I no longer got parsing URL errors when fetching.
You can have .env file per environment and then set
REACT_APP_API_ENDPOINT=http://localhost.whatever
So for example .env.development
REACT_APP_API_ENDPOINT=http://localhost.whatever
.env.production
REACT_APP_API_ENDPOINT=http://production.whatever
Usage of env variables is explained here https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#what-other-env-files-can-be-used
Eventually, you can add it to your script like
"scripts" : {
"start": "REACT_APP_API_ENDPOINT=http://localhost.whatever npm/yarn start"
"start-production": "REACT_APP_API_ENDPOINT=http://production.whatever npm/yarn start"
}
If you don't really want to use above approaches at all then, assign your ip to some variable and add it to command to run your app
"scripts" : {
"start": "REACT_APP_API_ENDPOINT=$(curl ifconfig.me) npm/yarn start"
"start-other: "REACT_APP_API_ENDPOINT=$(echo MY_VAR_WITH_IP) npm/yarn start"
}
And then access your url from process.env.REACT_APP_API_ENDPOINT
You can set a base tag in your index.html that would set the base for all your requests from there on.
You can create the base tag dynamically by reading the document.location and map your required path.
Note that all relative paths will be then mapped from your baseTag
An example would be something like this
<base href="https://www.dog.ceo/" />
And then create a request like this
fetch('api/breeds/list/all')
.then( response => response.json() )
.then( ({message}) => console.log( message ) );
The full address of that call would the be https://www.dog.ceo/api/breeds/list/all
I'm building a multi tenant app in React (with Webpack setup via base, dev and prod config files), and I'm wondering the best way to create and access per-tenant variables.
When I run my app with:
npm run start tenant1
I am able to access tenant1 in Webpack by using this:
const tenant1 = process.argv[process.argv.length -1];
However, now I'm wondering what is the best way to make that variable globally accessible. My hope is to use that variable to the create a folder structure within the app along the lines of:
/app/${tenant}/img/
/app/${tenant}/css/
/app/${tenant}/components/
Ideally without having to import a variable into every single javascript file.
Any suggestions or links to existing setups would be greatly appreciated.
Update Jan 2019:
I've found a way to achieve this with Create-react-app, not perfect but it works and achieves the following:
Run a React app on port 3000 that works for multiple domains simultaneously.
Forward all requests not handled by React to a back end.
Optionally use SSL in development.
Create-react-app has a proxy option that is very easy to setup. Simply add the following line to your package.json file:
"proxy": "http://localhost:5000"
However, this will not work for multiple domains. There is a more advanced proxy configuration available.
After following these steps, you will be able to control where different requests are sent, but it does not entirely provide the ability to proxy multiple domains - to achieve this:
Create the file .env in the root of your create-react-app project.
Add the following to it:
NODE_PATH=src/
DANGEROUSLY_DISABLE_HOST_CHECK=true
# optionally add this line for SSL in development
HTTPS=true
From the advanced proxy instructions above, you should end up with a file called setupProxy.js in the root of your /src folder - change to the following:
const proxy = require('http-proxy-middleware')
const options = { target: 'https://[::1]:8000', secure: false }
module.exports = function(app) {
app.use(proxy('/api', options))
app.use(proxy('/graphql', options))
}
The magic part is the https://[::1]: 8000, which will forward all domains from the root request to the same back end. This doesn't seem to be well documented anywhere, but I believe it is the IPv6 equivalent of 127.0.0.1.
After this, you can add entries to your hosts file (for example: 127.0.0.1 some-domain.example.com), and in your React app use just the paths (/api or /graphql) and requests should be proxied to the same domain as the browser is running on.
Original answer:
I ended up taking a fairly manual approach to this.
I'm using a react/redux boilerplate, but I've modified the npm scripts like so:
"start:tenant1": "cp -r ./tenants/tenant1 ./app/tenant && cross-env NODE_ENV=development node server",
"start:tenant2": "cp -r ./tenants/tenant2 ./app/tenant && cross-env NODE_ENV=development node server",
Each tenant folder is copied to the app when the development server is run with the relevant command, and files are named the same within each tenant folder (masthead.svg, vars.js, etc) so that imports throughout the app can be static.
Mostly this works because I'm not using a node server in production, a static build folder is generated by the boilerplate.
Hope this helps someone.
I'm trying to get through the Angular 2 with TypeScript on OS X. I have followed the tutorial and received no errors when compiled. The npm start command completed successfully and a new tab was displayed in Safari. The address is http://localhost:3000 the only thing that showed was
Cannot GET /
I am not familiar with Lite-Server and I don't know if I've failed to start something to get the tutorial running.
Is there something I've missed or some way to determine if the Lite-Server is running?
I suspect your folder/file structure might be confusing lite-server.
lite-server will look for a bs-config.json file. This should be at the same level as your node_modules folder.
Here is the github page for lite-servier.
For example, to change the server port, watched file paths, and base
directory for your project, create a bs-config.json in your
project's folder:
bs-config.json
{
"port": 8000,
"files": ["./src/**/*.{html,htm,css,js}"],
"server": { "baseDir": "./src" }
}