Is there any way to hide react source codes in server side browser(Like google chrome, Firefox, Microsoft Edge). I am seriously stucked with this, as i am trying to develop a react application but it shows all of my source code in the browsers. Any help will be highly appreciated. Thanks.
React is a Frontend library. You are asking how to hide html, css and js source code in browser. If you want to hide your logic from web browser then use a backend. Easiest way is to use Next.j. All the code you write in getServerSideProps() will not be shipped to the browser and only runs on the server. All pages will render server side . This way you can ship only html, css and js to browser without your app logic
You can't hide it necessary, perhaps you could obfuscate it a bit
Here is an article that goes more in-depth: https://code-boxx.com/hide-javascript-code-from-client/
Related
I am creating a mern stack application and ı have problems as shown in the pictures
Here is what shows when ı press ctrl + U in chrome
Here is what shows in dev tools
My app is still in development mode and is this affects seo ? and how can ı render in source code what shows in dev tools ?
Thanks
it's happening because the jsx we write are actually closer to js than html,
after we ship the code the we send the js and only the root div.
as the js executes in browser the div gets populated.
now it has effects on SEO,
you won't get any preview of your website if you share it on any social media if you go with raw react.
if it's a blog, or some documentation page I would suggest you look up static generation or server-side rendering and go with nextjs or gatsbyjs.
That happens because a ReactJS is rendered using JS. It means that the DOM will be updated using JS. When you open it with ctrl + U you're looking only to the HTML document, without any changes made by the JS engine.
I don't think leaving it like this will affect SEO, but you you can use server-side rendering to achieve what you want.
I've built my website in Next.js, deployed statically via Netlify. Whenever I load it in a new tab, I get a white flash where the SVG logos are visible but nothing else, before the rest of the content loads in. I don't think this is a Flash Of Unstyled Content but it has a similar effect. I'm experiencing on desktop Chrome, Safari and Firefox, but doesn't seen to be happening on mobile. I've been trouble shooting for hours and am no closer to solving. Here's the repo if anyone wants to have a look. Any insights greatly appreciated.
Quoting directly from styled-components' docs:
Basically you need to add a custom pages/_document.js (if you don't
have one). Then copy the logic for styled-components to inject the
server side rendered styles into the .
Refer to our example in the Next.js repo for an up-to-date usage
example.
When using styled-components with Next.js you need to do a little magic in the _document.js. There is a with-styled-components example in the Next.js' repository. Please see here: https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/pages/_document.js
I want that my online website link that is opened in my mobile browser checks whether my mobile app is installed or not and then opens it in my mobile app.
I want my functionality as I have shown in this
image
I am using AngularJS,Express,NodeJS in my application.I tried node deeplink
but it does not work for me.Please provide me with the appropriate solution.
This functionality is known as Mobile Deep Linking. The easiest way to get started is with a deep linking service like Branch.io (full disclosure: I'm on the Branch team), Yozio, or Firebase Dynamic Links. They all do exactly what you're describing.
this could Help you perhaps:
Check this
Im looking for some guidance on a responsive site design written using Bootstrap 3.
Basically I want the mobile version to be as lightweight as possible and only load JS and HTML that is necessary for the mobile view, and not load assets required for the desktop view. I would like to ignore loading specific JS files when the page is loaded via a mobile device.
Is there a simple method to do this with Bootstrap?
My guess is that I need a Javscript function to detect the device and use that as a trigger, however I was wondering if Bootstrap had this capability that I could use?
Appreciate any thoughts.
It seems there is already answer to detect mobile browser with javascript. Detecting a mobile browser
Otherwise you can detect the mobile device by using http_user_agent to decide not to load assets when the page is loading.
Here is already answer to detect mobile device with php.
Check if PHP-page is accessed from an iOS device
You can perhaps do it by user agent. There is an answer here that might help
Load a javascript file and css file depending on user agent
Its been about a month since I started using AngularJS. I used to write my codes in SublimeText2 but i wanted to use WebStorm since it claimed to be more AngularJS friendly. I wrote a simple Hello World app and tried to run it but i couldn't get any hint of how to do it. I also don't have any knowledge about Node.js.Do i need Node.js to run app on WebStorm? Is Node.js a server? I tried going through tutorials on WebStorm page and also read few articles on Node.js but couldn't understand it. Can anyone explain it in a simple and understandable way?
You can open your HTML+JS application in the selected browser in WebStorm by clicking on the browser icon on the top right corner of the editor tab with index.html file opened (or any other html file you'd like to open in browser).
The same action could be done from the file context menu: Open in - Browser.
WebStorm will automatically start built-in web server for your convenience.
Note that you still can go to your project folder and execute your particular HTML file from there, the same way you would do it with the text editor.
Read more on working with AngularJS in WebStorm in this blog post.
If you have back-end in Node.js for your app, then you, of course, need Node.js installed. To run your node web app you need to create Node.js run configuration. More on it here.