I looked around the internet for this and found this medium article using serve. The article directed modifying the packange.json file to this:
"scripts": {
"dev": "react-scripts
"start", "start": "serve -s build",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"heroku-postbuild": "npm run build"
},
Now this works in development. I get console logs saying Content is cached for offline use. And google Lighthouse gives me >90% on progessive web apps. The problem is, when I deploy to Heroku, during build it runs the npm run build specified in the package.json scripts. But on opening the app, I get 21% on performance, and 50% on progressive web apps in firehouse. Also, it says service worker not registered. Which means it is not serving from the build folder. As an extra, I ran npm build myself in development machine and deployed the project TOGETHER with the build folder, but still same result. Now I also came around this other articlesuggesting to use node.js server and change scripts in package.json to this:
start: "node server.js"
I no nothing about node.js, so I decided to consult here for better choices.
EDIT: If a server command is needed, like in the node.js in the second medium article, and in Garesh's php code below - if anyone could help with a similar code in python(django), it'd be nice
Found the answer to this in this comment online:
Before deploying the app go to:
Heroku dashboard > settings > buildpacks > add buildpacks and then add github.com/mars/create-react-app-b...
Or, in command line you can do
heroku buildpacks:set github.com/mars/create-react-app-b...
If you don't do this step, heroku will deploy the development build (which is slow) of your react app instead of the optimized production build.
Build you code with:
npm run build
Now Put this code in the index.php file:
<?php header( 'Location: /index.html' ) ; ?>
Now put this index.php file into your build folder.
Copy this build folder somewhere else.
Now configure your new folder with your heroku app.
then
git push heroku master
Related
I have a React project and installed mock server with json-server node module.
(For your note: Here is the json-server documentation for better understanding. [link]1)
I can start mock server with npm script [npm run mock].
After run the script, mock server start working with this link: localhost:3000.
This react project is working well on local environment.
Now I am going to deploy react project on vercel.
But I have no idea for start mock server on vercel.
How can I start mock server on vercel?
Here is the scripts of package.json file for the application.
{
...
"scripts": {
"start": "PORT=3001 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"mock": "json-server --watch src/mock/db.json",
"preinstall": "npm install --package-lock-only --ignore-scripts && npx npm-force-resolutions"
}
...
}
Please ask me more information what you want to check.
I had a similar issue and this article save my life.
https://shadowsmith.com/how-to-deploy-an-express-api-to-vercel
Instead of deploying together with my React project, I deploy JSON Server as a separate mock server.
First of all, you need to create a server.js to run JSON Server as a module.
Reference: https://github.com/typicode/json-server#module
At the end of the file, export server in order for Vercel to turn Express into a serverless function
// Export the Express API
module.exports = server;
Last but not least, create a vercel.json in order to deploy to Vercel.
Here are my scripts for your reference purpose: https://github.com/kitloong/json-server-vercel
I have a SPA react app to host my personal projects. The layout is created with react, but each personal project is a directory with normal index.html, .js, and .css files.
I couldn't figure out how to successfully use <Link> to render the regular .html pages on click, so I'm taking the easy route for now: manually moving each directory into build, then linking to it with .
This works, but every time I rerun npm run build it erases all of my project directories. How can I prevent this behavior? (I'm using create-react-app with defaults).
tl;dr: How to tell npm run build not to delete certain directories inside build.
Build folder should be cleaned up on each build. This is best practice so your project can be build by different developers, having only source code.
To achive your task you should use additional npm script which will be automatically run after build. (You may see all possible stages when scripts can be run here)
postbuild script should copy additional files from some path under src folder to build folder. So on each build you'll have all required files in place
Example
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"postbuild": "copy .\\src\\app.js .\\build\\app.js"
},
Last line will copy app.js from src folder to build folder. The same way you can create script to recreate all required directories after each build.
I made a simple react app, and wanted to deploy it.
At first, I tried npm run build. I got "The project was built assuming it is hosted at the server root."
I needed to deploy the app to my web server, so found a solution that worked:
set PUBLIC_URL=http://example.com/sampleDir&&npm run build
However, the next time I type npm run build, the message is always The project was built assuming it is hosted at "whatever path I set just before".
I tried set PUBLIC_URL='root' to set back to the original condition. But the message I got after executing npm run build was not the same as the first time.
Rather it said: "The project was built assuming it is hosted at root/."
If anyone knows, please let me know how to return this situation to the original: "The project was built assuming it is hosted at the server root."
1.
Unfortunately, my command line does not recognize 'unset':
'unset' is not recognized as an internal or external command, operable program or batch file.
(it seems that your way should work fine, and other google searches support it... I'll have to search more about it later)
Fortunately, though, the next line worked:
set PUBLIC_URL=&&npm run build
I'm not sure why... probably because I'm using cmder as my command line???
2.
Your package.json advice was tried, too.
My original package.json was like below:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
And, I changed it into yours:
"scripts": {
"build": "node scripts/build.js",
"build:sample": "PUBLIC_URL=http://example.com/sampleDir npm run build"
}
Then, I got an error message... (I'm not sure what this error exactly means...)
internal/modules/cjs/loader.js:584
throw err;
^
Error: Cannot find module 'C:\MyLocalDevFolder\scripts\build.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
at Function.Module._load (internal/modules/cjs/loader.js:508:25)
at Function.Module.runMain (internal/modules/cjs/loader.js:754:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
Anyway, after more searches, I could do what I want without contaminating the environment, adding the code below after the original "scripts" property in the package.json:
"homepage": "http://example.com/sampleDir/",
Thank you again for your advice, Tholle~
Happy coding~~~
I've created an React app with create-react-app and I want to deploy it to Back4App.
The problem is I want to deploy the build folder and not the public folder (which I understand is the default for Back4App / ParsePlatform).
So far, I haven't found any way to config deploy to use anything other than the public folder.
Any solution / workaround to this?
If you are using B4A CLI, one of the easiest ways to deploy a create-react-app is, firstly, changing the build script into your package.json as below snippet:
...
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build && cp -r build/* {{PATH-TO-YOUR-B4A-APP}}/public",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
...
As you can see, you just need to move all content inside create-react-app build folder to the public folder of your cloud code. After that, move to your app path and run b4a deploy.
Also, you could add a step to clear all public folder content before move the new stuff, but be careful with this step.
Otherwise, you could access the Back4app Parse-Dashboard into the Cloud Code Functions and deploy all the build stuff in public folder using the browser interface.
This is a live demo of a create-react-app deployed in Back4App.
I'm just starting the react.js tutorial, I've downloaded the files and then it mentions:
"Follow your progress by opening http://localhost:3000 in your browser (after starting the server). "
I know this may sound stupid, (bear with me since I'm a beginner with React) but how do I start the server in this instance?
Thanks.
Marc
Pretty solid chance it's npm start from the project root.
Properly packaged modules will have some node scripts configured in package.json. It's customary to use start as the script to run the dev environment, though some might use build, dev, or other names.
Here's official installation process: link, and officially recommended tutorials
# install react cli
npm install -g create-react-app
# create app
create-react-app my-react-app-name
# go to project folder
cd my-react-app-name
# install dependencies
npm install
# start live server
npm start
output:
$ You can now view my-react-app-name in the browser.
$ Local: http://localhost:3000/
$ On Your Network: http://192.168.0.105:3000/
$ Note that the development build is not optimized.
$ To create a production build, use npm build.
You can run any one of the below mentioned commands to start the node server for your ReactJS application:
npm run-script start
npm run start
npm start
All the above commands are equivalent but people prefer the third one as it is the shortest to type on keyboard.
The start parameter in these commands maps to the start key present under scripts configuration present in package.json file of any ReactJS application. Here is a sample package.json file of my hello-world application:
{
"name": "hello-world",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"devDependencies": {
"react-scripts": "0.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
You can see that react-scripts start is written in front of start key. So react-scripts start command will get fired when we run any of the three commands which I had enlisted in the beginning e.g. npm start.
I used Node to run the server. The steps I followed are:
I downloaded the zip package from the Running a server section
here
I had the link open: http://localhost:3000/
I opened up Node.js Command Prompt and navigated to the downloaded
zip project. From Node example here:
Just type the commands in the example:
First npm install and then
node server.js.
See the screen shot below:
When I refresh the localhost web page I see the following:
Sounds like you're following the official React tutorial, in which case the instructions to start the various included server implementations are here.