asp.net core webapi with authentication (back-end) and react redux app(front-end) with authentication working independently - node.js

i need asp.netcore web api with authentication (ApplicationDbContext i.e.identity default database context ). i feel comfortable with visual studio as back-end.
2.i need react-redux app with authentication(front-end) working independently that start with "npm start". i feel good with vs code. on the front-end i want to add react-redux and redux-thunk to implement my course website front end. i have been in struggle for a week to achieve this.i tried with vs templates but when ever i install react-redux the user management fails and the client app does not start.tried, web application,api and web application with restful templates.
if someone have better idea to accomplish my task . my overall problem is to create a website that can present online courses.the teachers could add course material and student can access.

Try running npm install before your create-react-app script.
If that doesn't work, deleting "node_modules" folder and running npm install.
If that doesn't work, you can always try setting up your react environment manually (For example, as in this great tutorial here)
Worst-case, you can always use react just client-side only, and although this becomes difficult due to most online tutorials being server-side, at least you can get started and not be blocked on your project.
Source: I googled ;)

Related

Can you easily explain the process of deploying ionic (based on react) apps with a node backend?

I recently started using react with a node server as a backend. I'm having problems to understand how to deploy such an app. I'm a beginner with ionic and deploying websites (or rather web based mobile apps) so I apologize if this is an easy/stupid question.
I searched a lot about this but my brain is still struggling to understand the deployment process. As I understand, any website have generally two parts, the frontend built with HTML/CSS/JS and the backend built with nodejs (in my case). If I want to run the app, I need to type npm start in the terminal right? so I'm only running the node server actually, where it will serve the HTML pages (static pages) depending on which url endpoint I wrote, right?
So deploying this is "easy" by copying the static files into a remote server and just run the nodeJs server to serve pages depending on the request, right. Therefore, is the start command here npm start, which will start the whole app.
I'm now using the ionic framework with react syntax and nodejs in the backend. There is a special command to run the ionic app (frontend), which is ionic serve. So if I run this the frontend will show up in the browser. Furthermore, I need to run the node server with npm start to handle requests. Therefore, to start my app, I need the ionic serve and npm start commands. How can this be deployed?
After some research, I read that I need to deploy the ionic app (frontend) and the backend separately. For example the ionic app would be a webapp and the server also a separate webapp (since I'm using MS Azure). The communication between them can be over rest API or web sockets as I understand. Is this the right approach to do this or there is a better/more clear way?
deploying two apps would mean that I need to pay for two apps on azure. Is there a way to minimize costs and have a functional app?
PS: generally, I'm having problems to understand the deployment process. I understand basically how the web works and I can build website on my machine but I'm not confident about my skills when it comes to deployment. Surprisingly, there is not much on the internet about it. Can someone please recommend articles, books or ideally videos that explain this process. Thank you in advance.
here is how you deploy ionic apps as pwa - https://ionicframework.com/docs/react/pwa
if you are using a node backend, the you would start the server same as you would normally, If I am understanding the question
Though your question is not specific to a particular issue but highlights a wide variety of issues, i will still try to explain it.
Ionic is primarily used for creating HYBRID/WEB MOBILE APPLICATIONS. Although you can deploy the code as a website too, but you will not be able to get any benefit out of using ionic for a website only and not using react as a standalone framework.
Be clear on your requirement, your question talks about website and web based mobile apps. Deploying a website and a hybrid mobile application is not one and the same thing. Websites are hosted on servers, mobile apps are deployed in app stores.
If you are not going to deploy to any mobile platform, i suggest you drop ionic and build your website with react.
Now coming to Ionic mobile apps, this is the flow
Create Ionic Project -> Build project for iOS/Android platform -> Deploy these apps to respective app stores
You will not host your Ionic mobile code on any hosting provider.
Your node.js backend code gets hosted on a hosting service. The endpoint URL will change to your hosted servers IP address.
Read about following topics first
What are hybrid mobile applications
What is Ionic
How to build mobile apps using Ionic
Publishing Mobile Applications
Deploying node.js to a cloud host

Should I build server-side of application inside nuxt.js server directory?

I want to build full-stack application with Nuxt.js. I am wondering where I should create my server-side inside Nuxt.js or maybe I should create separated project only for server stuff.
I am trying to set up my project but I do not know how I should do it. The application which I am building will have own front-end, back-end and also database (I will use MongoDB) but actually I do not know how I should start. I was reading a lot about SSR and Nuxt.js seems really good if am planing to use Vue.js on fronted. While creating nuxt app I can choose to use Express and then I can see server directory inside my directory structure does it mean that i should build all back-end inside this directory or maybe it is only for small stuff?
I have also another question what if I want to use Nest.js on back-end can i just use npm i -g #nestjs/cli and then nest new project-name inside my server directory ? I was looking also for this answer but almost all results in google for this type are about (comparison between Nuxt.js, Next.js and Nest.js).
It will be my first bigger full-stack project and I want to do it right but I am a really beginner in this so I am looking for answer from more experienced programmers.
You can run express or any node.js server you want inside Nuxt.js. When installing Nuxt.js with scaffolding tool create-nuxt-app, you can choose integrated server-side frameworks : Express, Koa, Hapi, Feathers, Micro, Fastify, Adonis (WIP). There isn't offical Nest.js integration, but you can easily find a starter kit on github.
With create-nuxt-app, if you choose to use any node.js server inside your nuxt app, you will see a server directory inside your directory structure, with the corresponding server-side pre-configured index.js file.
Here is my own feeling about it:
I think the inside solution make sense for a small SPA or Headless project (Ex: parse and serve files, a simple JWT Authentification, a small websocket server...), or for a front-end logic application that cannot fit in client browser and who are nothing to do with the database (like image or file computation).
But generally, this server run the database layer for your Nuxt application: a REST or GraphQL API. It can also run your business logic of your app, serve authentification, and more and more when project growth...
If you think about separation of concerns and microservices
architecture, do not use server inside Nuxt.js. Splitting both frontend and server will result more flexibility. You can host frontend and API in different servers.
So now, do nuxt.js really need a node.js server ?
Yes if you plan to use it in SSR mode, No if you plan to use it like a SPA or Static generated way. Docs here... .
In SSR mode, nuxt.js ask data to your API at the first rendering, and provide a complete SEO compatible page to the client browser or bots. It also provide all javascript that the browser need to navigate and fetch your API. For that, nuxt.js in SSR mode should run with node.js.
I assume you said "back-end" for your API and your business logic application, in this case, you should separate nuxt.js and your server. Two node.js instances to run both.

Best way to implement Angular Universal

I suffer a lot in the past with angular apps and social media, so I'm glad to see that Angular Universal is being developed.
Currently I have some apps that are Angular4 as front end, and Java with Spring as backend. As far as I know there are some ways to implement Angular Universal here but they seem pretty complex (at least is what I read). So I want to know if that is in that way or not...
But anyway, my main question here, is because I saw that in order to implement Angular Universal we should have (ideally) to make the backend with nodejs, how to structure these two technologies, I mean... Should I have Angular app as a frontend app and Nodejs app as a totally different backend app (just like Java) where both are connected with web services? Or should I served Angular4 SPA direcly from Nodejs views?
And where should I place Angular Universal here?
Now that Angular CLI v1.6 is out, there's native support for building Angular Universal into your projects easily using Node.js! Essentially, you would ng build --prod to create a dist/ folder, and then create a simple node back-end and connect to your dist/ folder containing your front-end code. This article gives a great step-by-step guide: Angular server-side rendering in Node with Express Universal Engine.
When you use Angular Universal, it is going to be a single process (Operating system process) that hosts and serves your Angular pages.
In production you may have multiple such processes behind a load-balancer.
Your back-end APIs (if developed in Javascript) may be hosted in the same Node server or in separate server.
The Angular Universal setup steps are detailed here in the official documentation.
However, I had a few wasted hours to find out the following point
Webpack 3 is not compatible with ts-loader versions higher than 3.5.0. At the time of developing this, the latest version of Angular CLI is 1.7.2 which uses Webpack 3.*. Hence, while setting up Angular Universal, install ts-config#3.5.0
Finally, here I have a seed project for Angular Universal. It uses Vagrant to locally setup the development environment. Also, by tweaking an environment variable in your local host machine, you can run it in a production mode in a Docker container. The steps to run it are detailed in the readme file.
If you refer to my Dockerfile in the above Github link, its entrypoint reads:
ENTRYPOINT ["pm2-runtime","start","/home/aus/dist/server.js"]
So, you see, it's just a singe command, and your app is up and running at port 4000. Of course you can use other command line parameters to provide memory limit, port and so on.

How to Setup API Environment in Node

I'm building a Node.js REST API. I have a repository which will hold this REST API code.
I want to be able to test my API. For now I'll just test via Express and make GET requests to start but I want my express stuff in a separate project because a REST API isn't gonna have any web app portion.
I'm using Webstorm. So right now I have created a gitHub repo to hold the API which I'll expose REST endpoints.
I want to create a new project also again that will be a Node-Express project for the purpose of pulling in the REST API and consume it. I am also doing this in a seperate project because I don't want my Express stuff checked into my REST API repo, it doesn't belong there. I am just using Express for testing stuff.
I realize I can later test my REST endpoints headless, but right now I just wanna get started and figure that out later and just going with an Express project to somehow consume my other API REST project.
I'm not quite sure on a few things, as I come from a .NET enviornment and no longer a .NET developer. Here are some questions I have:
My Question: If I have my Node Express project open in Webstorm, how would I "include" or "require" my rest-api? Would I somehow npm it down? But my REST api is not public. Would I just branch my git REST API repo down, then what? How would I include it into my seperate Express App project?
Or...do people usually still add express to their REST API projects anyway, maybe it doesn't matter?
You can use npm link to link a local package
$ cd main-project
$ npm link ../path/to/web-api
Then in your main project, you can require it as you would any other module
If you don't intend on publish it, the package.json in your web-api should have
{
"private": true
}

Using Mean.io for my SPA application

I have a new project which will consist of two parts...a client - SPA using AngularJS and server side using Nodejs - MongoDB. Many articles recommend using Mean.io when developing similar projects, but couldn't find any information on why this is better than simply installing Nodejs, Mongo, AngularJS and using them.
So can someone please tell me the benefits of using Mean.io over installing Node, Mongo, Angular and Express and using them? OR in other words why it is better to use Mean.io rather than downloading and installing each package/ framework individually? Thanks
well, you are going to save a lot of time with plain simple boilerplate code, in my case I've been using meanjs which helps you with a lot of basic functions like:
login using passport, local strategies, social network strategies (g+, facebook, twitter)
Twitter bootstrap
Consistent folder structure
Consistent file naming
Environment configuration for dependencies and custom "settings" (dev, test, production)
pre configured routes with controllers
software development workflow:
grunt (preconfigures task like jshint, build, test)
yeoman generator (save you a lot of time)
nodemon (for reloading pages everytime you save a page)
testing frameworks for client and server side
I can list a lot of more but the point is to mention the benefits are far beyond just by putting all 4 main pieces of software together.
for more info you can look at the overview

Resources