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
Related
React fails to make proper build, even with default app.
I ran commands npx create-react-app my-app then npm run build.
When I open index.html in /build, the site doesn't work and I get following logs:
You can just open a React (or Angular) build by clicking on the HTML file.
What you have to do is the following:
Install any static server module (i.e. serve):
npm install -g serve
In the root directory:
serve -s build
And then your app will be served.
It would be wise to do that before you deploy to any cloud storage or even your own server, but if you are 100% your app works, you can just deploy in on Vercel, Heroku or GitHub pages, they are free.
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 familiar with cloning git projects.
But I'm struggling to clone a Gatsby project, https://github.com/MunifTanjim/gatsby-theme-dox, and then run the website locally.
I run git clone https://github.com/MunifTanjim/gatsby-theme-dox
Then it downloads
I go into the correct directly, and I've tried
gatsby build
This works
then
gatsby develop
I get the following error:
ERROR gatsby <develop> can only be run for a gatsby site.
Either the current working directory does not contain a valid package.json or 'gatsby' is
not specified as a dependency
I've also tried
I also cd into the demo folder and run the same -- I get it to run locally but with a 404 error...
Is it possible to run the demo of this gatsby project?
I'm quite new to Gatsby so trying to understand by starting with a prebuilt project.
Once you clone the repository you need to install the dependencies. cd to the root of your project and run npm install or yarn install.
gatsby build and gatsby develop, like all Gatsby commands, must be run in the root of your project, where the package.json is located. Otherwise, it will throw an exception.
In your case, run the following in order:
git clone https://github.com/MunifTanjim/gatsby-theme-dox
cd gatsby-theme-dox
npm install #or yarn install
cd demo
gatsby develop #to build the site in development mode
gatsby build && gatsby serve #to build the site in production mode
I'd suggest taking a look at Gatsby commands (gatsby-cli) to understand what you are running.
git clone https://github.com/MunifTanjim/gatsby-theme-dox.git
cd gatsby-theme-dox
yarn install
cd demo
gatsby develop (you should see the main page in http://localhost:8000/) or gatsby build and when it ends run gatsby serve in the terminal (see the main page in http://localhost:9000/)
I am new on Next JS, I have created a small application. It is using API calls and more features.
During development, Using the command as npm run build I am able to create .next folder as build and using npm run start I am able to run that build.
Now the client is asking for build, so what should I send to him? Either complete project and ask him to do the
npm run build and npm run start (which I don't think so)
or only the .next folder. But how he will run this build?
Open package.json in your editor and add the following export script to the file:
"export": "npm run build && next export -o _static"
run this code in the terminal:
npm run export
Open _static folder and there is all of your file.
Some possible ways of sharing your project:
You can easily build and host your project with services like vercel or netlify. Easy and quick. Check out the vercel CLI in particular.
Your client can clone the git repo, install all dependencies, run build, and run start. This'll start a production server. Check here: https://nextjs.org/docs/api-reference/cli#production. Bad idea if your client is not a dev.
You can build your project and send the output to your client, which he/she can then view by spinning up a server (python simpleHTTPServer, Mamp). Also a bad idea if your client is not a dev.
Long story short, host your project somewhere and send them a production URL.
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.