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.
Related
In the React file structure under components there is index.js file that runs the main character when running the project. Is there anyway to rename this file to any name I want? I am using PM2 server manager and there is no way for me to keep track which server is which when running multiple index.js files. So the only option I got is to rename this index.js to something specific to each project.
I have tried changing the package.json file's start script as below but nothing worked out only gave errors.
"scripts": {
"start": "test.js react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Appreciate all your help!
You can't change the name of the file used by create-react-path.
You'll have to either eject to use custom webpack config by running
npm run eject
But it's a one-way operation (see documentation)
Or you can use Vite instead of create-react-app to bundle your project.
Vite is more configurable than create-react-app, you define in the index.html the name of your js file. So you can put any name you want.
Maybe even this example could help you:
https://vitejs.dev/guide/ssr.html#example-projects
I'm building a fairly complex browser extension for a client and it occurred to me that I could leverage Redux in the backend scripts to simplify the overall information flow, as well as using React in the UI, and modern javascript in the content scripts I need.
I've got a basic extension working, by building the background and content scripts in separate build steps. My src folder looks like:
src/
background/
index.js (and other js files)
content/
index.js (and other js files)
toolbar/ (shows intro text and a button to display prefs - see webpage below)
toolbar.html
App.js
App.css
components/ (etc)
webpage/ (displays the UI elements for use prefs etc)
webpage.html
App.js
App.css
components/ (etc)
common/
index.js (etc - common logic used by both toolbar, webpage, content and background.)
Right now I am building each subfolder independently via scripts in package.json
"scripts": {
"prebuild": "rimraf build",
"build": "yarn build:app && yarn build:bg && && yarn build:cont",
"build:app": "INLINE_RUNTIME_CHUNK=false react-scripts build",
"build:bg": "webpack --mode production ./src/background --output ./build/background.js",
"build:cont": "webpack --mode production ./src/content --output ./build/content.js",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
but the build:app step by default seems to also build everything that's in src/ so the background, content etc stuff gets duplicated and the html in the subfolders is unused.
Is there a way to tell create-react-app's webpack config to build these all to suit the needs of my extension without ejecting?
Im trying to deploy an application build using react and i wanted to know what all security measures i need to take while pushing to production.
I ran npm run build command and i got the build folder structure as shown below.
Then i deployed this build folder to production site and i can see from my browser console that my source files are also present as shown in following screenshot.
How do i remove these source files from production so that users wont get to see my source code and they will only see the minified files?
What all security measures should be taken before deploying to production?
Review your webpack configuration (in your package.json) to
remove or comment out the line:
devtool: 'source-map',
More options on https://webpack.js.org/configuration/devtool/
Change this line in your package.json from
"build": "react-scripts build",
to
"build": "GENERATE_SOURCEMAP=false react-scripts build",
You have to remove the .map files from your build.
to do that you just have to:
CREATE A FILE .env in the same folder of your package.json
PUT THIS IN THE .env FILE: GENERATE_SOURCEMAP=false
That is all!
For me works!
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
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.