Typically deployment process: You build once
In Java or any other programming language, you build your application once and then deploy to various environments. There is like .env or .properties file which has environment configurations that are loaded when application starts.
How does react work
In react, from my understand there is package.json. So, it uses it to do build. OUr package.json has following content:
"price": "http://11.222.111.122/myApi/pricing",
"teacher" : "http://11.222.111.122/myApi/teacher",
"mainbanner" : "https://11.222.111.122/myApi/mainbanner",
We running build the application and run on Apache server (not on node.js)
Question:
a. How can we have environment file so that we can specify to use above urls at time of starting application.
Obviously, we have different urls for different environment.
Navigate into your React project folder using Terminal or CMD and build your React project using command:
npm run build
Then a build folder will be created inside your React project which will contain the final production files. Just upload those files into www or public folder of your Apache server.
If you want use it as subdomain, upload it to your subdomain folder.
Remember that React built version works like other Javascript web applications at the end.
Related
I recently create Express and MongoDB API and after that, I connect that API to my React Application successfully and which is running well. But one situation occurring during deployment now I need to deploy both projects separately means I need two hosting plan for them. So, I want that both project running on the same host. Is it possible? and How?
A build of any React application creates (unless webpack-dev-server is used to compile it) the output which consists of static files: script bundles and .html file(s) that reference the bundles in <script> tag.
Those files can and should be copied to Express in production build. Then you have one server on one host. When React application runs inside a client (e.g. browser) it gets everything including .html files, script bundles, API responses from the single source: Express backend/server. Which by the way excludes any possibility of getting CORS issues so many people are asking about here on SO.
Example, e.g. a boilerplate project that demonstrates all that.
If you execute commands:
git clone https://github.com/winwiz1/crisp-react.git
cd crisp-react
yarn install && yarn start:prod
and then point your browser to localhost:3000, you will have React app running inside your browser and it got everything from one single Express backend.
crisp-react has two subdirectories: client with React client app and server with Express backend. The build command copies the build artifacts from one subdirectory to another. So you can even rename or delete the client subdirectory after a build, it won't affect the Express backend.
I am developing a project with frontend on ReactJS and backend on Java (Spark framework). To build server with frontend, I build the frontend using yarn build and then, using Maven, copy contents of build folder to src/main/resourses/public folder, from which Spark serves all static files. Recently, I moved to CRA and since then all icons disappeared on production build.
When I run the project on webpack-dev-server, everything works fine. All icons are loaded as you can see below:
But when I build production version of the frontend and copy it to the public folder, I get an this error:
The same fragment on production build:
My thoughts are that either icon fonts are copied incorrectly at some point, or the server cannot properly load the fonts, which is less probable as they were loaded earlier when I did not use CRA.
Also, it seems that fonts do exist in the website, because they appear as Sources in Chrome Dev Tools. However, as I said they might be loaded improperly.
P.S. I'm using the following versions of Semantic UI. I generated semantic folder in src directory using npm i semantic-ui.
semantic-ui: ^2.4.2;
semantic-ui-react: ^0.85.0
I found an issue. The problem was that after I built the frontend, Maven incorrectly copied the production build to the public folder
The solution was found here
First of all, my question is not about how to install angular. I'm just getting started with this framework and already got a question right at the beginning.
Usually I create new web projects (HTML, PHP...) in the default web folder of the apache webserver (/var/www/). I did this with angular too under /var/www/firstAngularProject, but it seems the application itself is only accessible on its default port on the webserver root. In my case this is localhost:4200
When I try to open the path in my browser localhost/firstAngularProject I see the index structure and I think this could become a security issue.
So my question is where should I install the angular project or what is the usual way to install it?
When you run Angular using the cli command ng start (which I assume, based on you describing using localhost:4200) you're running the application using webpack-dev-server. This is undesirable since it's only meant for use during development, not for production.
In production Angular works just like any other frontend framework. You build the application with ng build --prod which produces a number of build artifact (in the /dist folder). These artifact are simply static files you make available through some webserver, in your case Apache, by copying the content of the /dist folder to /var/www (or whichever is your default web folder) and that's about it.
I'm newbie on react, I did 2 paged website for exercise, all is working well on my localhost.
But i'm confused about how upload project to my linux server.
What i did ?
I create react app via terminal with this command :
create-react-app react-demo-project
Terminal create my project and in project root i have node_modules directory.
so here is i have some questions:
1- React project will work normally on linux hosting?
2- I need to all my project upload to ftp? Because there is arround 20.000 file in node_modules directory.
With this command build your app :
npm run build
Build folder has created in your project directory, open index.html in your browser and check output...
If you saw a blank page (after build and opening index.html) , you must change the main js file path in the index.html :
default is : src="/static/js/main.ddfa624a.js"
change to : src="./static/js/main.ddfa624a.js"
I changed js path and this worked !
create-react-app has a command to bundle your app to a ready to deploy state.
npm run build
This command will bundle your app in /build folder. With the contents of this folder you can deploy your app in any hosting environment. You don't need to install your packages and libraries manually when you use this command. More information about using this command and deploying your app in different hosting environments can be found create-react-app README
Deployment
npm run build creates a build directory with a production build of
your app. Set up your favorite HTTP server so that a visitor to your
site is served index.html, and requests to static paths like
/static/js/main.<hash>.js are served with the contents of the
/static/js/main.<hash>.js file.
1- React project will work normally on linux hosting?
Yes, it will work in all webservers, unless you have server side rendering (SSR)
2- I need to all my project upload to ftp? Because there is arround
20.000 file in node_modules directory.
Files in node_modules will NOT go to your web server. These are development dependency files used only during development.
Run npm run build
This will create a folder called build in project root. This will have all html, css , images and js files
Copy all files and folders in build folder to your site root.
If your site has to be hosted in a sub folder in root you need to do the below, otherwise you will see a blank page. This is because your static files (css, js etc) are not loaded correctly.
Open package.json
Add a new entry homepage: /your_subfolder/
It will look like this
Now do steps mentioned above and your site should work fine
Add this line to package.json:
"homepage": "./"
That should make it work without the need to adjust index.html after every build.
I am wondering if it is possible to deploy react.js web app that I've built to a share hosting site that does not have node.js installed?
I use webpack to build the application and it creates normal html, js, css file. I uploaded the static folder that includes all those html, js(bundle.js) and css files, but when I request the site, the server reply with 404 bundle.js not found response.
Use npm run build, you should get a folder with the index html file inside that will run your app. Try this with xampp first before you actually deploy to your server.
Here is everything step by step
npm run build
or
yarn run build
it will generate a build folder that looks like this:
Copy everything and move it to the htdocs in xampp or ftp upload the directory to the public_html file in your hosting
Yes you sure can put react on a shared hosting provider.
Seeing as you're getting a 404 error (not found), you are probably referencing your react file/bundle incorrectly. It might not even be named bundle.js if you're using a boilerplate to create your application.
Can you give more information? What does your index.html file look like? What does your directory structure look like? If you are able to post these files I can tell you what the issue is.
Update:
The answer below should be accepted. (Although this would assume that you have the ability to make a build which you have not verified or not.)
Make a build using the build command through whatever boilerplate you used. Deploy those files on your shared hosting server. Make sure that index.html is at the root of where your server is expecting the root to be and your app should be live.
For deploying a react app on a shared hosting you need to create a production build. Production build is a pack of all your react code and its dependencies.
in most shared hosting we put our site/app inside a public_html directory so if we hit www.yourdomain.com it serves the code from public_html directory.
so if your react app is ready to go, edit your package.json file add a new key value:
"homepage":"http://yourdomain.com"
then create a build using following command:
npm run build
after running the command you will see a new directory named build in your app root. It will contain js and css for the app and a index.html file. You need to upload all the content inside build directory to public_html directory, and that's all, go to your domain and your app will be working just fine.