How can transform my react project into script to connect it to html page?
I am a new one in react please be tolerant. My boss demands to get completed script to connect it to html page without node and etc. What shall I do? Thank you.
Please check this url:
https://blog.bitsrc.io/react-production-deployment-part-3-heroku-316319744885
Also, Please check these steps:
In package.json, added this line to the scripts
"heroku-postbuild":
"NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run
build --prefix client".
Then added this
"engines": { "node" : "[your node version]" } after scripts.
In index.js, put the following code after your routes set up
if (process.env.NODE_ENV === "production") {
app.use(express.static("client/build"));
const path = require("path");
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "client", "build",
"index.html"));
});
}
I assume that you use git for version control and already install Heroku.
Open your terminal, then Heroku login -> Heroku create -> git push Heroku
master. If you do not get any error, you are a success to deploy your app.
Hope you will get it to work.
In order to get rid of node, you need to first build your project. If you've initialized your project with create-react-app, run this command:
npm run build
A folder named 'build' will appear in your project root containing your production app. Now the build folder is ready to build and you can serve it with a static server like 'serve'. To install 'serve' via npm, do this:
npm install -g serve
that's it! you can serve it now:
serve -s build
You can find out more about deployment here:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment
by using create-react-app
https://create-react-app.dev/docs/getting-started
https://create-react-app.dev/docs/deployment
dev: npm start or yarn start.
prod: npm run build or yarn build.
Related
I'm using create-react-app. When I run npm start (react-scripts start) it continuously builds the changes for me and does it magic. But what is the output folder for that? I know when I build it manually where the files go.
I want to use firebase emulator to serve the current version (the continuous build) of my react all but I don't understand where's the output folder or how to achieve it.
You could try this package https://github.com/Nargonath/cra-build-watch
Install it and add the script to your package.json
{
"scripts": {
"watch": "cra-build-watch"
}
}
and run it
npm run watch
more info here
https://ibraheem.ca/writings/cra-write-to-disk-in-dev/
and if you go to the react repo issue linked in the article you would find more workarounds
tl;dr
run npm run build, not npm run start
More Detail
react-scripts start runs webpack-dev-server internally. As a default setting, webpack-dev-server serves bundled files from memory and does not write files in directory.
If you want to write files with webpack-dev-sever, you could set writeToDisk option to true in your dev server configuration.
However, I dont think this is what you want to serve on firebase emulator. Webpack-dev-server does not build optimal app for production, and you also need to use react-app-rewired to customize dev server configuration in cra template.
What you want to do is npm run build to run react-scripts build, which builds optimized production app in /build directory.
I'm using react-app-rewired & customize-cra to setup a multi-project monorepo with shared TypeScript code, without ejecting from create-react-app (the setup is described in this answer). The layout is like:
/my-project
|--- /frontend <-Contains the create-react-app
|--- /shared <-Contains some typescript source, used by the CRA
...
It works great locally. The only thing I'm unable to figure out is how to get it deployed to Heroku:
If I use Git to just push the 'frontend' subdirectory (git subtree push --prefix frontend heroku master), the Heroku build of course fails, because it cannot find the source files in /shared - those weren't even pushed to the server.
I tried using the monorepo buildpack as described here, but the result was the same. Build failed, couldn't find source files in /shared.
I've tried the "hacky" solution in the comment here: setting "postinstall": "npm install --prefix frontend in package.json. Although it seemed to build, accessing https://myap123.herokuapp.com and https://myap123.herokuapp.com/frontend yield 404.
I also tried the solution in the comment here: putting release: cd frontend && npm install && npm run build in the procfile. Same behavior: it seems to build, but is not accessible from the browser (404).
While there are many resources about deploying projects from a monorepo, and many others about sharing code between React & Node projects, I've been unable to find anything that actually works for both: share code, and deploy the projects that reference that code to Heroku. At this point, I'm just focused on trying to deploy the frontend.
Any help would be greatly appreciated.
The simple answer (from this thread) is that Heroku provides no proper way to run in a subdirectory. Any solution will be a hack, and those will vary depending on your project layout.
In my case, I got it working by putting a package.json in the root of the repo with:
{
"scripts": {
"postinstall": "npm install --prefix backend && npm run build --prefix backend",
"start": "node backend/dist/app.js"
}
}
This did not require a procfile. If it's a typescript project, make sure the backend's package.json's script tag has "build": "tsc".
For the frontend, I gave up on Heroku. Instead, I just deployed the frontend to Netlify, which lets you easily deploy from a (pre-built) subdir. So between using Netlify for frontend & the above hack for backend, I have a hacked-together working stack, until Heroku hopefully gets around to properly letting you specify a subdirectory from which to run (they claim they've been waiting for NPM Workspaces, which was completed as of NPM 7).
Why my heroku app is serving app directory? This directory and it's files should not appear like you see in the picture. Should display only static directory.
I use rimraf npm package to remove sourcemaps (.map files) and when I use serve -s build command it works properly on localhost, it displays only the static directory. But when I deploy my files to heroku using heroku/nodejs buildpack it serves the files like in the picture.
Important to note: I use just create react app and don't use any http server like express.js
#edit
Ok I know where is the problem. On localhost I use serve -s build and it serves just build directory. When I use npm start on localhost it serves app and build like on the heroku. Because I use npm start on heroku. But how to switch this command to serve? Tried to replace the start script with "start": "serve -s build" but it works only on localhost.
Ok I solved this problem.
Right now I use npm start script which call nodemon ./server.js script which is just express server with get '/*' and send a index.html
No more serve or react-scripts start on production.
I was working on a ReactJS project, which I created using the npx create-react-app app-name command. I used some images in the project as well.
My problem is that after I ran npm run build the file paths did not work.
What I mean is that instead of
<link href="./css/main.493343f3.chunk.css" rel="stylesheet">
The result was this:
<link href="/static/css/main.493343f3.chunk.css" rel="stylesheet">
It were be comfortable if I wouldn't have to rewrite the file paths manually, but fine I can do it.
The bigger problem is that as I mentioned I used IMG-s in my project.
The code what I used for the images:
import pic_1 from './pics/pic_1.jpg';
<img src={pic_1} alt=""/>
After compiling (running npm run build) it did not work. As I thought the file paths were not working.
"static/media/placeholder.3a8380d3.jpg"
Instead of
"./media/placeholder.3a8380d3.jpg"
I fixed it manually but it still didn't work.
What should I do differently?
How should I compile the code correctly?
Thank you for reading my question! :)
Let us try to deploy your app to Heroku:
Step 1: Create a React App
npx create-react-app hello-world
cd hello-world
Step 2: Create an Express JS server to serve your production build
In your repository, create a file called server.js and insert the following code:
const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(port);
++In your package.json file, change the start script to the following:
start: "node server.js"
Step 3: Create a React production build
Heroku now runs the build command automatically when you deploy, but it’s a good idea to test the production build locally before deploying (especially your first time).
You can create a production build locally by running this command in your terminal:
npm run build
Step 5: Deploy to Heroku -[you can do this in two ways]:
a) Go to your Heroku account on their official site and create your app manually.
b) or just run heroku create yourAppName
After that you would do the following:
It's done using Git, so you have to do the following:
git init // to initialize a Git repo
git add . // to add the new files
git commit -m "Heroku deploy" // In order to commit your changes
// Now goes the comment to connect your local app to the one created on the Heroku
heroku git:remote -a nameOfYourApp // <- the one created on their website
git push heroku master // to push it to heroku master repo
Now you can run `heroku open` to see your app in the browser
Link for references
b) Using the zero-configuration approach. With this approach you can skip the express server (it's all done for you) -> Just type the following commands:
npm install -g create-react-app
create-react-app my-app
cd my-app
git init
heroku create -b https://github.com/mars/create-react-app-buildpack.git
git add .
git commit -m "react-create-app on Heroku"
git push heroku master
heroku open
Link for references
UPDATE:
Since you're using firebase here are the steps you should take:
Make sure you install firebase tools npm i -g firebase-tools
Create production build of your app by running npm run build
Go to https://console.firebase.google.com and create your "empathy" app
Run firebase init inside of your project and provide the following answers:
Are you ready to proceed? -> YES
From the list choose hosting
Choose your app which you previously created on firebase console
What do you want to use are your public folder -> build
Do you want to configure a single page application -> YES
Do you want to overwrite existing index.html folie -> NO
After that just run firebase deploy
at first, make sure your project runs truly
the make build to the application by fro both client and server if they are found
the push the project in GitHub
go to location of folder project
git init
git add .
git commit -m "deploying static--err, dynamic site to heroku"
git remote add origin remote repository URL
git push origin master
install heroku-cli tools then login
heroku login
Enter your Heroku credentials:
Email:
Password:
heroku apps:create nameproject
git push heroku master
git add .
git commit -m "A helpful message"
git push heroku master
tell me if it success or not
I have created a test React application and I started it with the create-react-app. I am starting it with with yarn start, but that starts the debug version of the application. I did npm run build and it created the build folder, however when I do yarn start from the /build folder, it still starts the debug version of the application. I need this for testing performance with the optimized version. How can I solve this?
You can actually use static server to run build version of your app. It's doable with serve. You can test it with:
npm run build
npx serve -s build
Navigate inside the directory of your app first.
According to the official create-react-app website. When you run npm run build or yarn build you create a build directory with a production build of your app.
After running the command above the next thing you can do to check the build version of your app is to install serve to serve your static site on the port 5000 by default.
npm install -g serve
serve -s build
This will copy the link to your clipboard that you can paste in your browser and see the build version of your app.
You're trying to move from a development build to a production build with create-react-app you need to deploy it using a web server, I would recommend using Heroku or a droplet or you can use Netlify which has a simple set up procedure using the below commands:
cd project-name
npm run build
npm install netlify-cli -g
netlify deploy
Follow command line prompts and choose yes for new project and ./build
as your deploy folder and voila you have a production React app!
You can host the app locally using apache, nginx, express
If you want to run your app in browser with build files served locally from the filesystem (i.e., without a web server), you can put this in your package.json:
"homepage": ".",
Now
build your app with npm run build.
launch <your app>/build/index.html in the browser.
Note: This solution is not suggested if your app (or some routing library) is using the HTML5 pushState history API. https://facebook.github.io/create-react-app/docs/deployment#serving-apps-with-client-side-routing