So similar questions have been asked, but I have additional questions that I'm needing answered. It's also quite possible I'm overthinking all of this.
To create a react project offline, I should be able to get the minified react library from a CDN. But without internet access, I need to save out that javascript to a different file, right? Then I can transfer that to my offline machine.
From there, how does running the project work? Can I use command line tools for react? Do I lose the react debugging capabilities? Or am I just writing React code and then loading the index.html into the browser?
How does node_modules work? I know the amount of modules react installs when using create-react-app is a lot. Is all of that self-contained in the CDN?
Do I need to get Babel for transpiling? or is that also included in the CDN?
Thanks in advance.
EDIT:
It seems that using node_modules is going to be out of the question for my use case. So I'll need to use the CDN scripts. What do I lose when using React this way? I'm assuming I can't run from the command-line, so I'm only able to load the index.html into the browser. Same question as before though, do I need Babel for transpiling? What other capabilities that I'm used to having with React to I lose when only using the CDN script?
Related
I am trying to figure out how Babel gets used.
In one of my current projects, I see that I have a Babel file, but I never set up any configuration as far as I can tell that deals with Babel. So I want to know if it is actually being used or if I just have it installed.
When I deploy my React app to somewhere like AWS Amplify or Heroku, is Babel automatically being used and this is how my browser can understand React? Or would my browser understand React even without Babel?
You can not be sure that all versions of all browsers understand modern JavaScript. That is why, even if you write modern JS in your code, Babel will automatically turn it to plain vanilla JS so that it is compatible with almost every browsers.
This links I attached below, are of highlighted texts. Please give it a read as I believe it will clear up your confusions somewhat.
https://www.freecodecamp.org/news/jsx-in-react-introduction/#:~:text=But%20the%20browser,JavaScript%20compiler/transpiler.
https://create-react-app.dev/docs/getting-started/#:~:text=You%20don%E2%80%99t%20need,good%20to%20go.
How do I set up a Create React App to make a single myApp.js and myApp.css file that can be moved where ever I need?
Background:
At my work we have two older websites in need of updating and both have a React app inside the multi page site. The React apps use Create React App. Not my choice of configuration, this is just what I have to work with and I can not change everything.
Currently, when small changes are made to the site we build the bundled a take the final myApp.js and myApp.css files the CRA produce and moved these to the folder where the website expects them to be.
It might be easier to understand it this way. The app builds the .js|.css bundle files here:
../appA/someFolder/build/static/main.js and ../appA/someFolder/build/static/main.css.
These files are then moved to here:
../appA/hostThisSite/someFolder/js/main.js and ../appA/hostThisSite/someFolder/css/main.css
And for the second website it does the same yet moves the file to a whole other website structure
../../appB/hostThisSite/someFolder/js/main.js and ../../appB/hostThisSite/someFolder/css/main.css
Currently we need to update the React app. And to do so I need to address that the new Create React App creates a bunch of files in the /build/static/ folder (and they include hashes in the name and not myApp.js and myApp.css.)
I have done research and the only thing I have come up with is this:
https://www.labnol.org/code/bundle-react-app-single-file-200514
And the boss doesn't want me to use gulp.
This is a known issue in create-react-app, several proposed solutions in https://github.com/facebook/create-react-app/issues/5306 that involve using npm packages such as react-app-rewired or craco.
Another answer to this question with two possible solutions, one with eject another with react-app-rewired https://stackoverflow.com/a/58570278/388038
this is my first post on stackoverflow. I'm writing because I couldn't find a clear answer to my question. I don't know if the title is the right way to put it but it's what I went with.
The Situation:
I'm creacting a single-page-application with react and intend to build the back-end with node.js and express.js, but for now it's just react. I used create-react-app to create the project and I'm using Firebase for hosting.
The folder to deploy in the firebase.json file is set to build. So when I want to deploy my web app to firebase, I use the npm run build command first to create the build folder which will be deployed.
When I then go to my website, open the chrome developer tools and click on source I can see all my files inside a static folder. I see it just the way I formated it, as if I was inside my code editor. All the components. My entire folder structure. Basically the whole code of my app is viewable in it's entirety.
I was a bit shocked and confused so I checkt if this is normal. I went on big websites like youtube or twitter but I could find hardly anything in their source folder. When I view the source of twitter it does have some files which is just plain and open javascript but not alot. And also the folder structure is not visible. I need to view files using Ctrg + P. Most files look different too etc.
It's best if you just have a look at the source section for twitter in the dev tools. I don't really understand what I'am seeing but I notice it is diffrent when compared to my website's source.
Their webpack somehow doesn't map the bundle out into plain readable code. My bundles in the build folder are mapped into exactly what they were before being bundled. At least that is how it seems to me.
Simple and short: Source of my website shows everthing (all the files) just as it is and for everyone to see. Source of big websites it doesn't do that. Their's is somehow concealed. And I want to know what they did, how they did it and how I can do the same.
I have seen many people say that it isn't important if it is no security risk and I know a bit about obsfuscation, but I believe they do something else too.
I also want to emphesize that this isn't about if I need to do it or not. I want to do it but I dont now how or what. I haven't found any place were this was adressed completely so I really don't understand how it's done.
I am thankful for any help I can get.
put GENERATE_SOURCEMAP=false in the package.json scripts -> builds and then run npm run build. Hope it will work.
"scripts": {
"build": "GENERATE_SOURCEMAP=false react-scripts build"
}
check this reference How to disable source maps for React JS Application
You are basically looking for a module bundler and there are a lot out there, the most used is https://webpack.js.org
It is very simple to use and there is an online tool to help generate the config file for different use cases https://createapp.dev/webpack/no-library
What webpack does, it will create a bundle.js for you so at the end your project will be just two files index.html and bundle.js
I am new to npm, react and webpack but I have a question. In npm how do you prevent a library from being included production package file?
For example, I am just building a very small component in react and on the site where I am going to place my small component. The problem is Jquery library and bootstrap is already being called in the masterpage of the site and I didn't want to call the same library again in my small application production build but I still want to use them during development(because I am only testing it on local and jquery is not called there). TIA
Appreciate your time ready this and hope I got to learn more from you. By the way I created the app using create-react-app but I already 'ejected' it, so its using the webpack 3
Take a look at Webpack externals
You can have two webpack configs, on the dev config you include the package as normal, but for your production config add externals for jquery, so it uses the global one already on the page
The ability you're looking for is named Code splitting
React loadable may be a good option for you as well
I come from a background in Angular, but I wanted to start learning React. I want to make a React front-end for a nodejs Express web service.
In Angular, I could simply build the source code into a static folder with a standard index.html, and it can be deployed on any web server. With React however, every tutorial I see is about running React in its own server using create-react-app and npm start.
I know you can also just use script tags to import the React framework in a static page, but then you can't use JSX syntax, and I would like to. Is it possible to simply build a React project into a static folder with an index.html that can be deployed on any web server?
Yep, you can do what you're describing. If you want to use JSX syntax, you'll need Babel, which transpiles it into standard JavaScript.
You can avoid the complexities of setting it up by using create-react-app to create the app, then running npm build instead of npm start. This will compile everything into a build directory, complete with index.html.
CRA uses its server for development purposes. You don't need CRA for using React of course. But, as your app getting bigger and bigger you will need some more extra tools. For example you want to see your code instantly without refreshing your browser. Here comes the dev server and hot reloading.
CRA uses Webpack behind the scenes. It is a great tool for bundling (obviously) all your files (including css), minifying, uglifying, optimizing your code etc.
For simple code or testing purposes using one file and attaching React and Babel to your file could be enough but for real apps you will need more. Either you will use something like Webpack on your own or you will use CRA and let it do all the extra stuff for you.