Deploy React.js (create-react-app) Node.js to DigitalOcean Cloud Hosting

Deploy React.js (create-react-app) Node.js to DigitalOcean Cloud Hosting

☞ 

#Nodejs

  • for me i start at 20$/month is good start and then we can upgrade.Choose a datacenter region: DigitalOcean has many datacenters that mean you can pick one for your project if your visitors almost from NY United States let select New York, so example if i target all visitors from…
  • Your cloud vps is ready to use.Check your email address that you did register in DigitalOcean you shold get an email notify about your VPS IP, root account and password.
  • in this project we need open port 80 for http access, 443 https (ssl) , and port 22 (for ssh login) that is enough.By default Firewall is inactive, you can check it by run command sudo ufw statussudo ufw app listSo let config FW allow those ports bysudo ufw allow ‘Nginx…
  • So Node.js is requiredvisit to see the documentationWe use package management to install, here is command to install Node.js v9curl -sL | sudo -E bash -sudo apt-get install -y nodejsAfter successful Node.js installed we can check the version by typing in command line : node -v and you see see “v9.3.0″Setup…
  • we can change the port to 3001 or 3002, or 8080 … so if you pointed your domain tabvn.com to Degital Ocean cloud vps so this case we can visit the chat app in http://tabvn.com:3000 so we need just see nodejs web app in default port 80 such at http://tabvn.com , that…

I have been using DigitalOcean for me and setup for my customers, so recommend use it for your project just pick vps depend on how big of your project start at 5$ or 10$, 20$, price very flexibility…
Continue reading “Deploy React.js (create-react-app) Node.js to DigitalOcean Cloud Hosting”

Horizontal scroll animations in React Native – codeburst

  • Horizontal scroll animations in React NativeLink Animated with ScrollView to create a nice navigation UI animation in React NativeWhat we will be buildingRN lets you build a nice and smooth UIWhat you will needReact NativeSimulatorNo third party libraries required :)Creating Screen component with AnimatedFirst, import Animated, Dimensions, ScrollView, StyleSheet, Text, View from “react-native” .
  • Next, create a component that will be treated as a screen or a view.We are using Animated.View here because we are going to animate that wrapper component.That width ofscrollPage style and are important because we are going to interpolate horizontal scrolling values to multiple animation values.
  • In other words, we are going to track where the screen is and animate the screen component based on that value.It’s one of the things that are tricky to explain in words, but it is the key concept to understand for this to work.Basically, we link animations based on the…
  • When the scroll position is at 150, first screen is half way done exiting, and the second screen is half way done entering.Adding animationsSince they are all set up, it is time to write the animations.
  • You would have to write a different inputRange since FlatList removes items that scroll way off screen.I think this is pretty neat UI animation that’s pretty simple to use.

That width ofscrollPage style and transitionAnimation(props.index) are important because we are going to interpolate horizontal scrolling values to multiple animation values. In other words, we are…
Continue reading “Horizontal scroll animations in React Native – codeburst”

We’re ready for your Lightning Talks submissions – React Day Berlin – Medium

You still have a chance to join our speakers on stage:  #ReactJS

  • We’re ready for your Lightning Talks submissionsReact Day Berlin forecast: 🌩 A chance of snow and thunderous applauseReact developers sometimes have to deal with tough situations, but making small talk with your fellow geeks has never been one of them.
  • Do you have a project you’d like to discuss with / pitch to an audience but a full talk would be too much for now?
  • React Day Berlin is ready for you, anyway.📩 Submit your Lightning TalkAs always, all winning speakers will get to attend React Day Berlin for free.
  • We’ll pick 4 of all proposals that’ll make the most sense in our lineup.Local developers and React newbies are especially welcome to submit.
  • In case you need help figuring out and fine-tuning your talk, we’re here for you.Each talk is limited to 5–7 minutes without QA.All winning proposals will be published on our website and here on Medium and also promoted through our social channels.Talks are subject to the Berlin Code of Conduct….

React developers sometimes have to deal with tough situations, but making small talk with your fellow geeks has never been one of them. Well, there’s no need to discuss the weather when the scene is…
Continue reading “We’re ready for your Lightning Talks submissions – React Day Berlin – Medium”

We’re ready for your Lightning Talks submissions – React Day Berlin – Medium

We're ready for your 🌩 Lightning Talks submissions!  #ReactJS #ReactDayBerlin

  • We’re ready for your Lightning Talks submissionsReact Day Berlin forecast: 🌩 A chance of snow and thunderous applauseReact developers sometimes have to deal with tough situations, but making small talk with your fellow geeks has never been one of them.
  • Do you have a project you’d like to discuss with / pitch to an audience but a full talk would be too much for now?
  • React Day Berlin is ready for you, anyway.📩 Submit your Lightning TalkAs always, all winning speakers will get to attend React Day Berlin for free.
  • We’ll pick 4 of all proposals that’ll make the most sense in our lineup.Local developers and React newbies are especially welcome to submit.
  • In case you need help figuring out and fine-tuning your talk, we’re here for you.Each talk is limited to 5–7 minutes without QA.All winning proposals will be published on our website and here on Medium and also promoted through our social channels.Talks are subject to the Berlin Code of Conduct….

React developers sometimes have to deal with tough situations, but making small talk with your fellow geeks has never been one of them. Well, there’s no need to discuss the weather when the scene is…
Continue reading “We’re ready for your Lightning Talks submissions – React Day Berlin – Medium”

React.js Efficient Server Rendering – Hacker Noon

#ReactJS #Javascript RT @ReactAmsterdam: Make #ReactJS Server Rendering Efficient:

  • React.js Efficient Server RenderingFor about a year now I’m developing Web Applications based on React.js, and it was amazing for me to write code that actually scales with JSX components, rather than functions, it’s giving more simplicity to frontend.But in some cases we need SEO with dynamic JSX content or we need more performance in load time for a frontend pages.
  • And for that cases Facebook developers made React.js in that way so it can be rendered on Server Side too, using Node.js basic functionality.So the flow is almost similar to this oneClient sending request to get some JSX template pageNode.js server getting main file containing JSX codeRendering it to plain HTML codeSending HTML response to clientUsing HTML markup, then client loading also React.js client side code for adding dynamic logic to rendered HTMLThis is helping to display HTML content faster than React will render it, and it is helping to give some content to Search Engine bots or website crawlers.But What If You Don’t Have Node.JS backend?This is the real questing that was standing for me when I’ve started working on large Python Django project.
  • I decided to do React.js as a frontend, but they hat a lot of Python stuff on a backend, I couldn’t rewrite all code just for server side rendering.
  • I think we really don’t need!And I got an idea to build standalone Node.js Server only for React.js JSX template rendering and nothing else, so I can make a proxy request to that server and it will render JSX content for me and will response pure HTML back to Python Django Template.
  • What is that?So using basic principle of proxy requests I just made very simple code for Pythonimport requestsimport jsonPROXY_RENDER_ADDRESS = ‘http://localhost:3000/’def get_html(filename, props): try: props_str = json.dumps(props) r = + filename , data=props_str , headers={‘Content-Type’: ‘application/json’}) if r.status_code == 200: return r.text, props_str except Exception as e: print(e) return False, FalseWhich is basically making POST Request to proxy rendering service and by passing global state as a JSON, getting back the HTML code rendered by Node.js server.So the main advantages that I gotNo need to integrate Node.js in backend side, or use crappy JS engines in Python, which are eating a lot of memoryAbility to keep JSX template cache, which give huge load time improvementsScale backend services without scaling base rendering service, so you can have multiple servers with single cached rendering service and get better performanceHuge flexibility in writing code.

For about a year now I’m developing Web Applications based on React.js, and it was amazing for me to write code that actually scales with JSX components, rather than functions, it’s giving more…
Continue reading “React.js Efficient Server Rendering – Hacker Noon”

Working with Git Submodules

  • The ‘url’ gives the repository URL link for the respective submodules using which Git clones the project.
  • The two sample submodules are ‘SampleModule1’ with URL and ‘SampleModule2’ with URL start by initializing a Git repository for SampleProject, to do this we use the command in the terminal:

    git init

    2)We’ll create a SampleFile for initial commit using any text editor and commit the file using the command:

    git add.

  • We have the details for the submodule above, using that we’ll integrate those repositories into our project as one of the subdirectories:

    git submodule add git submodule add 3.

  • a)Now both the submodules are added to your project, if we check the repository tracking status in SampleProject directory using ‘git status’, we’ll get the following output:

    git status

    Here three files are created ‘.

  • git/modules/

    “Commands Quoted From try removing the SubModule1Local from our project:

    git submodule deinit SubModule1Local

    My project folder now looks like,

    -Working in Submodule: You can directly work in the repository of the submodule by changing the current working directory to the subdirectory of the submodule.

Working with Git is great. The modern version control system that boosts a distributed architecture has much to offer when compared to many of
Continue reading “Working with Git Submodules”

Why ReactJs? – (┛◉Д◉)┛彡┻━┻ – Medium

Why ReactJs?  #react #reactjs

  • Instead of writing an html line for news, messenger and marketplace you can see that they are basically the same, the only thing that changes is the icon and the information so we can make a component called nav that receives information and an icon.
  • Let code this component:First, we are going to make its container, with an JSON object with the information we want to be see.Now we are going to do the component:Using this practice, we are able to create a web app by just iterating a JSON object, that will pass the information to the containers.Another cool thing of react is its community.
  • There is a lot of components already made so you can just add them to your project as easily as adding a library to your normal html code.
  • Some github repositories that have a lot of components are:· lot of people have a problem with HTML being mixed with JS because they feel like breaking separation of concerns but in reality, it is more of a separation of technologies rather than concerns.
  • It helps your application to be more efficient because you don’t need to repeat code, there is an amazing community behind it, it has some really awesome modules that helps you to manage the unidirectional data flow, as well as managing which component must be render and if it is a component that is visible in all of the pages such as a menu to just render it once instead of every time you change of page.Tldr: react is awesome.

React is a new JavaScript library developed by Facebook released in 2013, but it wasn’t until 2017 that react was stable. React is like the best of both worlds, it has the functionality of JavaScript…
Continue reading “Why ReactJs? – (┛◉Д◉)┛彡┻━┻ – Medium”

React.js Efficient Server Rendering – Hacker Noon

“React.JS Efficient Server Rendering” by @tigranbs  #NodeJS #reactjs #javascript #python

  • React.js Efficient Server RenderingFor about a year now I’m developing Web Applications based on React.js, and it was amazing for me to write code that actually scales with JSX components, rather than functions, it’s giving more simplicity to frontend.But in some cases we need SEO with dynamic JSX content or we need more performance in load time for a frontend pages.
  • And for that cases Facebook developers made React.js in that way so it can be rendered on Server Side too, using Node.js basic functionality.So the flow is almost similar to this oneClient sending request to get some JSX template pageNode.js server getting main file containing JSX codeRendering it to plain HTML codeSending HTML response to clientUsing HTML markup, then client loading also React.js client side code for adding dynamic logic to rendered HTMLThis is helping to display HTML content faster than React will render it, and it is helping to give some content to Search Engine bots or website crawlers.But What If You Don’t Have Node.JS backend?This is the real questing that was standing for me when I’ve started working on large Python Django project.
  • I decided to do React.js as a frontend, but they hat a lot of Python stuff on a backend, I couldn’t rewrite all code just for server side rendering.
  • I think we really don’t need!And I got an idea to build standalone Node.js Server only for React.js JSX template rendering and nothing else, so I can make a proxy request to that server and it will render JSX content for me and will response pure HTML back to Python Django Template.
  • What is that?So using basic principle of proxy requests I just made very simple code for Pythonimport requestsimport jsonPROXY_RENDER_ADDRESS = ‘http://localhost:3000/’def get_html(filename, props): try: props_str = json.dumps(props) r = + filename , data=props_str , headers={‘Content-Type’: ‘application/json’}) if r.status_code == 200: return r.text, props_str except Exception as e: print(e) return False, FalseWhich is basically making POST Request to proxy rendering service and by passing global state as a JSON, getting back the HTML code rendered by Node.js server.So the main advantages that I gotNo need to integrate Node.js in backend side, or use crappy JS engines in Python, which are eating a lot of memoryAbility to keep JSX template cache, which give huge load time improvementsScale backend services without scaling base rendering service, so you can have multiple servers with single cached rendering service and get better performanceHuge flexibility in writing code.

For about a year now I’m developing Web Applications based on React.js, and it was amazing for me to write code that actually scales with JSX components, rather than functions, it’s giving more…
Continue reading “React.js Efficient Server Rendering – Hacker Noon”

Stop Managing CSS – Charlie Hulcher – Medium

Stop Managing CSS  #cssinjs #react #styledcomponents #css #http2 #reactjs

  • Stop Managing CSSA response to Managing CSS JS in a HTTP/2 WorldThis article on getting great performance out of HTTP/2 would have excited me hugely before.
  • Sane structure and tooling around SCSS that allows for the best loading benefits with HTTP/2 is definitely the future when your styles are separate from everything else.I believed in separating styles, behavior, and structure for a long time.
  • Keep style alongside behavior and structure.Coming from that context, reading about the right way to manage CSS felt like watching exciting evolution for a dated paradigm.
  • A cleaner design for a horse harness is a beautiful thing but doesn’t beat the engine.Solving the problem of chunked CSS delivery in order to get performance benefits from HTTP/2 sounds to me like reinventing the wheel from what you’re probably already doing.
  • Why rebuild that process in parallel for CSS?The core problem comes down to managing CSS inclusion/exclusion from the project through a human process.

This article on getting great performance out of HTTP/2 would have excited me hugely before. Sane structure and tooling around SCSS that allows for the best loading benefits with HTTP/2 is definitely…
Continue reading “Stop Managing CSS – Charlie Hulcher – Medium”

Awesome Expo Apps for React Native – BlechaTech – Medium

Awesome Expo Apps for React Native  #reactnative #reactjs #reactjs

  • Awesome Expo Apps for React NativeI’ve been working through creating an app that I need for my kids baseball activities during the past month and I’ve been really impressed with the toolset that the Expo team has put together.
  • It’s much nicer for me if this doesn’t have to go through the app store for development and testing purposes.JavaScript tool set — I’ve decided to use JavaScript as my primary language for the next bit unless there’s a specific reason not to use it.React — I’m spending most of my front end development in react these days, and I’m very happy about it.
  • The mental model is fairly straightforward and translates from web to mobile gives you an expo app by default.
  • Check out the expo explanation video:I decided I wanted to keep track of the expo apps I’m seeing in publish and the added bonus that they’re typically linked with a github account.
  • The first two are (authors and notes are cited in the github repo, link below):Seattle JS Conference AppGraphQL NYCI’ll keep adding to the list as I find new expo apps and PRs are welcome!Photo Credits:

I’ve been working through creating an app that I need for my kids baseball activities during the past month and I’ve been really impressed with the toolset that the Expo team has put together. Given…
Continue reading “Awesome Expo Apps for React Native – BlechaTech – Medium”