I have been trying to deploy my first react js application on Digital ocean for a few days now with no success.
It is a create react app and it is connected to a PHP API running an Apache server
I have successfully build my application by using npm run build command. when I try to access the build folder from my browser, I just get a blank page. I do this by simply accessing the routing my browser to access domain_name.com/myapp/build ( just for test purposes).
When I run npm start, I can access the home of the application in development mode at domain.com:3000. The script section of my package.json looks as follow
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"add-locale": "lingui add-locale",
"flow": "flow",
"start:prod": 'node dist/app.js'
},
My server is running on https://domain_name.com but when i do https://domain_name.com:3000, I can't access the dev version of my app but i can access the dev version with domain_name.com:3000.
any help around these issues will be greatly appreciated.
When you're running npm start you launch webpack-dev-server which runs on 3000 port and host your sources.
When you build your React app, you just prepare a single js file, which you should host with your Apache server together with your API files.
You need to include that js file in your index.html with structure and <script src="path/to/js"> to that file.
Let me know if you still have any question.
Update:
To solve the problem with routing read the official deployment manual and search .htaccess
P.S: maybe you find this https://gist.github.com/ywwwtseng/63c36ccb58a25a09f7096bbb602ac1de useful.
Related
I am working with a paid API. They whitelisted my ip. I can fetch there data from Thunder Client and postman app. But when I'm going to fetch the data from my react app. It's nothing do anything. Basically localhost:3000 are hosted on different IP right? So how to host my react-app local host from my IP(103.124.251.85)
To change your host for react app you just have to add HOST in your env like below:
HOST=you_system_ip
Or you can also add script in your package json file as well like below:
"start": "HOST=you_system_ip react-scripts start",
In your package.json you can change the "start" script to
"start": "SET HOST=103.124.251.85 && react-scripts start"
Or, you can create a file .env in the root of your project and set:
HOST=103.124.251.85
If you need to run you app over HTTPS, here is what to do:
In package.json you add the prestart script: it combines the private key and the crt of your SSL certificate into a pem and then it will copy it in the webpack server module.
"scripts": {
"prestart": "type dev_certs\\cert.key dev_certs\\cert.crt > dev_certs\\server.pem && copy /y dev_certs\\server.pem node_modules\\webpack-dev-server\\ssl",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
In the .env file you set:
PORT=443
HOST=103.124.251.85
HTTPS=true
If you're hitting an error 'allowedHosts' is empty:
options.allowedHosts[0] should be a non-empty string.
You can disable this check by passing the following env variable:
DANGEROUSLY_DISABLE_HOST_CHECK=true HOST=xxxx npm run start
I am trying to host my angular nodejs app in Azure service, Angular front end is working fine ,but while trying to access the api i am always getting "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable." The same code is working in locally .
You can use below code in package.json to start your project.
Solutions To Run Multiple Node.js or NPM Commands Simultaneously
"scripts": {
"ng": "ng",
"backend": "cd backend & npm run start",
"frontend":"http-server dist/samplecode",
"start": "start npm run frontend && start npm run backend",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
Test Result.（Download test sample code）
Set backend port 4200, frontend port 8080.
And we can found, two project all work.
frontend and backend port use same port, 8080.
We will find backend project is ok, and frontend has error.
3. The expected behavior is consistent with the result after deployment.
Suggestion
The front and back ends need to be separated, which is conducive to the maintenance and scalability of the project.
In azure app service, we can only use ports 80 and 443, so if the front and back ports are the same, there will be problems with the routing identification of the two projects. This is the problem you are currently experiencing.
If you only want to use one app services resource at present, the virtual application under windows cannot help you either, because the node project is deployed, and multiple projects cannot be started due to routing problems.
4. If you have a storage account, you can deploy the front-end project in the static website and the backend project in the app service. This eliminates the need to create new services.
I'm running a basic create-react-app production build on App Engine, but I'm not able to access my pre-defined environment variables. Is there any extra step I'm missing? I'm guessing it has something to do with the build process and serving a production build, but I'm not sure where to set the variable in this case.
app.yaml:
service: client-dev
runtime: nodejs10
env_variables:
TEST: "development"
package.json:
"scripts": {
"start": "serve -s build",
"start-dev": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
console.log(process.env.TEST) //undefined
According to CRA documentation, environmental variables are embedded during build time in a React app. They will not be available to static files during runtime.
In App Engine, contents of app.yaml are used during deployment which happens after React has finished building.
To make environmental variables available during build time, you can:
include them in a .env file in the root of your project if you are manually triggering the build process via yarn build or npm run build.
include them in a cloudbuild.yaml file for automatic builds using a continuous development platform like Cloud Build.
Note that the CRA documentation referenced above advises to begin every custom environment variable with REACT_APP_. For example your variable should be added like REACT_APP_TEST=development.
I have a very, basic, need: to store different endpoints for my APIs according to the environment. Suppose a simple file like this:
API_URL=http://localhost:8080
it should become, for my prod environment:
API_URL=http://myprodServer
and I'd like to have an integration test and a uat endpoint too!
Looking at my package.json I see:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
So my idea is:
Put a command line argument near to "build" and "start" so to specify local and production enviroment files
Have a way to access to said configuration in my app, say config.API_URL
Now, I come from spring boot, and in spring boot I have a file per environment.
I though dotenv could be my solution but I see two strange things on their website:
Please don't commit your .env file --> so, how are my colleagues supposed to build my application? I usually at least push local and test environment, while keeping the uat and production files directly under the server
You should have just one .env file --> ok this one destroys me: if I just have one file how am I supposed to handle several environments???
What am I missing here? Could you help me solve my problem? I'm new to npm so I'm a little confused...
It looks like you are using CRA to develop your React app. If so, your env variables should be REACT_APP_API_URL=http://localhost:8080. Notice the prefix. If you are using CRA, you must use the prefix. More about that here. If you do this correctly, the variable should be available in your javascript by using process.env.REACT_APP_API_URL.
At work, we each have a copy of the .env files locally, since we don't check it in. We have different .env files for each environment - e.g - .env.production, .env.development, .env.stage. We then have a run and build script for each environment in our package.json. Using env-cmd package, our scripts might look like this:
{
...
...
"start": "react-scripts start",
"start:stage": "env-cmd .env.stage.local react-scripts start",
"start:production": "env-cmd .env.production.local react-scripts start",
"build": "react-scripts build",
"build:stage": "env-cmd .env.stage.local react-scripts build",
"build:development": "env-cmd .env.development.local react-scripts build",
...
...
}
Along with this, we also have a git branch per environment so that on stage branch we would run npm run build:stage and deploy to Stage environment. We would do the same for production.
After looking around for a multi-environment setup, this is what I settled on and it works ok. However, I'd be open to improving the process.
I have a nodejs API as server and React/Redux app as client located in one git project: https://github.com/lafisrap/fcc_nightlife.git
I want to deploy it on Heroku using the heroku cli.
The scripts section in package.json is:
"scripts": {
"start-dev": "concurrently \"yarn run server\" \"yarn run client\"",
"start": "yarn run server | yarn run client",
"server": "babel-node server.js",
"client": "node start-client.js",
"lint": "eslint ."
},
start-client.js:
const args = [ 'start' ];
const opts = { stdio: 'inherit', cwd: 'client', shell: true };
require('child_process').spawn('yarn', args, opts);
In the client folder I have another package.json which defines the client. The scripts section of it:
"scripts": {
"start": "react-scripts start",
}
I did:
heroku create
git push heroku master
The api is running fine. But I don't know how to start/access the client.
You CAN NOT deploy two services in one Heroku app. In short, you have to deploy them to separate Heroku dynos to deploy two apps.
More information is provided in this stackoverflow answer to a similar question.
PS: It is always an option to serve JS files from your API server after building React files.
Hope this helps!
This repo shows the setup of Node.js serving up a React frontend running on a single Heroku dyno: https://github.com/mars/heroku-cra-node I was able to get one up and running using this as a guide.
Actually you must not want to run on different ports. because of cors and other issues. Implement proxy in nodejs OR implement nginx as a gateway for both server and client requests.