Cosmic JS Blog Stay tuned for feature roll-outs, news and updates as we continue to help you manage content for your websites and applications faster and easier.

  • In this tutorial, I’m going to show you how to create a simple Sticky Notes app using React, Redux, Selectors, Redux Sagas, a little bit of Node, and Cosmic JS.
  • For the sake of understanding how to consume Restful API’s, this tutorial will show how to make AJAX (XHR) requests to the Cosmic JS API in order to retrieve, add, update, and delete data/media in our Cosmic JS Buckets.
  • The bundle.js file located in our dist directory is what our webpack.config file will spit out after bundling all of our react components.
  • Request uses whatwg-fetch to hit AJAX requests to the Cosmic JS API.
  • This util is used to call those endpoints which are not present in the Cosmic JS package e.g deleteMedia and searchObjects based on filters – – Cosmic JS uses cosmicjs package to hit AJAX request to Cosmic API.

Cosmic JS is a cloud-hosted content platform that offers a flexible and intuitive CMS API. Build websites and applications with more freedom and manage content easier. Get started for Free.
Continue reading “Cosmic JS Blog Stay tuned for feature roll-outs, news and updates as we continue to help you manage content for your websites and applications faster and easier.”

RNG (React, Next.js, GraphQL) can slay the MEAN stack

  • This was not without hurdles as the community split during the early years, but in 2015 they reconsolidated from the IO.js fork and became the powerhouse we now know.The term “MEAN stack” is known as the use of MongoDB, Express, Angular, and Node.
  • It looks to me like the time for MEAN being king of the valley has come to a close.Enter RNG, this is the use of React, Next.js/Node, and GraphQL as a development stack, sure, there is no MongoDB or MySQL/PHP (-M or -MP) but more on that later.
  • It is a long video so if you want to keep reading feel free to watch it later.If this is the first time you have heard of GraphQL you should know that it is a replacement layer to any and all API calls, no more routing and no more data fetching headaches.
  • Just pick the data in the “graph nodes” and poof, call resolved.The major selling point would also be the ability to use any storage service as long as you configure the GraphQL layer to support it.ConclusionThe new React, Next.js, and GraphQL (RNG) stack has the potential to once again shift the JavaScipt ecosystem and arise as the prevalent stack for start-ups and tech companies to adopt for their apps.
  • The benefits in performance and ease of front-end and back-end development collaboration are undeniable with the use of GraphQL not only as a JavaScript centric app.What is not to like?Side noteSmall PSA, keep in mind the issues in the community with licensing as open-sourced software and communities fight for transparency and ownership of our beloved code.

Technologies rise and fall, and in recent years there has been an impressive amount of open-source communities backing libraries and platforms. There are instances where a “stack” or combination of…
Continue reading “RNG (React, Next.js, GraphQL) can slay the MEAN stack”

Microservices with Docker, Flask, and React

  • In this tutorial, you’ll learn how to quickly spin up a reproducible development environment with Docker to create a RESTful API powered by Python, Postgres, and the Flask web framework.
  • After the app is up and running locally, you’ll learn how to deploy it to an Amazon EC2 instance.
  • Refer to the resources for more info:

    By the end of this part, you should be able to…

    Check out the live app, running on EC2 – http://54.89.0.180/

    You can also test out the following endpoints…

    Essentially, the app is running in three containers – Flask, Postgres, and Nginx.

  • At the end of this first part, you will have the above app completed and deployed.
  • We’ll add authentication and a number of other services in the subsequent parts.

In this tutorial, you’ll learn how to quickly spin up a reproducible development environment with Docker to create a RESTful API powered by Python, Postgres, and the Flask web framework. After the app is up and running locally, you’ll learn how to deploy it to an Amazon EC2 instance.
Continue reading “Microservices with Docker, Flask, and React”

Test Driven Development Courses

  • In this tutorial, you’ll learn how to quickly spin up a reproducible development environment with Docker to create a RESTful API powered by Python, Postgres, and the Flask web framework….

    In Part 2, we’ll split the project into three distinct projects.

  • We’ll also add code coverage and CircleCI to each repo to ensure that each service can be ran and…

    By the end of part 3, you should be able to… Implement user authentication with JWTs Write tests to create and verify JWTs and user authentication Discuss the benefits of…

    This tutorial is powered by Real Python .

  • Please support this open source project by purchasing our courses to learn Python and web development with Django and Flask!

In this tutorial, you’ll learn how to quickly spin up a reproducible development environment with Docker to create a RESTful API powered by Python, Postgres, and the Flask web framework….
Continue reading “Test Driven Development Courses”

How to Build a ToDo App Using React, Redux, and Webpack

Build a to-do app using #ReactJS, #Redux, and #Webpack:

  • Let’s get started.TL;DRDownload the GitHub repo.Check out the demo.Getting Started:First, let’s make a new directory to build our project in and lets also make a package.json file.mkdir touch package.jsonNow, in your package.json, copy and paste the code below and then run npm install or yarn (if you’re a super cool yarn “name”: “cosmicToDo”, “version”: “1.0.0”, “description”: “A simple todo app thet uses the Cosmic JS API”, “main”: “index.js”, “scripts”: { “start”: “nodemon server/index.
  • js”, “build”: “webpack -w”, “test”: “echo \”Error: no test specified\” exit 1″ }, “author”: “”, “license”: “ISC”, “dependencies”: { “axios”: “^0.16.1”, “react”: “^15.5.4”, “react-dom”: “^15.5.4”, “react-redux”: “^5.0.4”, “redux”: “^3.6.0”, “redux-logger”: “^3.0.1”, “redux-thunk”: “^2.2.0”, “css-loader”: “^0.28.0” }, “devDependencies”: { “babel”: “^6.5.2”, “babel-core”: “^6.18.0”, “babel-loader”: “^6.2.7”, “babel-preset-es2015”: “^6.18.0”, “babel-preset-react”: “^6.16.0”, “cross-env”: “^3.1.4”, “nodemon”: “^1.11.0”, “volleyball”: “^1.4.1”, “webpack”: “^2.2.1”, “webpack-livereload-plugin”: “^0.10.0”, “sass-loader”: “^6.0.3”, “style-loader”: “^0.16.1” }}What we’re installing and why:We’re going to use the axios library to handle our requests to our Cosmic JS bucket.We’re installing react and react-dom to build our react components.We are going to use redux, react-redux, redux-logger, and redux-thunk to help us implement what is called the Flux architecture.The only thing worth mentioning in the dev dependencies is webpack and volleyball.
  • /reducer’;import thunkMiddleware from ‘redux-thunk’;import {createLogger} from ‘redux-logger’;const store = createStore( reducer, applyMiddleware( createLogger(), thunkMiddleware ));export default store;What’s going on here:We are setting up our redux “store” so that we can pass data down through “props” into whatever components we want (I am going to assume you have some working knowledge of how the flux architecture functions, if you do not understand this it is OK, just check the flux architecture link above).
  • /components/Home’;import {Provider} from ‘react-redux’;import store from Provider store={store} Home / /Provider, going on here:We are telling ReactDOM to target our “root” div from our index.html file and pop in our Home/ react component (which we will build out in our next step).
  • /Task’;class Home extends Component { constructor(props){ super(props); } componentDidMount(){ getAllTasks(); } render() { return ( div div className=”container” div className=”row” div className=”col-xs-12″ h1Cosmic To-Do App!!

In this tutorial I’m going to show you how to create a simple “ToDo” app using React, Redux, a little bit of Node, and Cosmic JS. For the sake of understanding how to consume Restful API’s, this…
Continue reading “How to Build a ToDo App Using React, Redux, and Webpack”

Building a new backend — Part 1 – lookapanda – Medium

Building a new backend — Part 1  #discord #webdevelopment #react #javascript #node #reactjs

  • Building a new backend — Part 1In this story I’d like to document my experiences in building a new backend.It represents my personal experiences and is not related to my profession as a Software Engineer.What is the backend for?This is a legitimate question, of course.
  • There is no real goal yet, I see it more like a personal challenge and practice.Some of my first pieces of code using LaravelI already built a backend quite some time ago already written in PHP using Laravel.
  • Times change quickly in a developers world and today I’m mostly programming in JavaScript (ES6, Node, etc.) and not that much in PHP anymore.Today (2017) I want to create something new again using the most modern technologies I can find.
  • REST APIs access information after all and said information needs to be stored somewhere.With my PHP API I was using MySQL (or actually MariaDB) and with my Node API it was MongoDB.
  • It should be easy to use but also powerful.In my next blog post I will share my first experiences in using Cassandra for building the database and probably also my decission for the framework I’ll be using.If you’ve come so far to read this very line, I want to say thank you.

In this story I’d like to document my experiences in building a new backend.
It represents my personal experiences and is not related to my profession as a Software Engineer. This is a legitimate…
Continue reading “Building a new backend — Part 1 – lookapanda – Medium”

A to V ; a walk through of js frameworks – Michelle L. Pepe – Medium

  • Most frameworks are created by hobbyist; whereas Angular is created by Google.
  • One of the biggest issues with JavaScript frameworks is that they are not exactly search engine friendly.
  • Ember basically recreated the best parts of Ruby objects, and then built the rest of the framework on top of them.
  • React doesn’t use Shadow DOM – instead it gives you the ability to create your own components.
  • Famous sites are Google, Virgin America, and HBO’s mobile site for iPad.

The supply of revolutionary js frame works such Angular, React and Vue fueled the demand of rapid app development in the past couple years. Google’s Angular.js allows developers to create fast…
Continue reading “A to V ; a walk through of js frameworks – Michelle L. Pepe – Medium”