How to Start Server for ReactJS using yarn as a beginner - javascript

I started learning ReactJS today since I know some JavaScript.
Now, I want to know how I start something like this:
I have installed Node.js on Windows, and after that, I was able to do this:
npm install -g yarn
Which gave a reply of this sort:
C:\Users\XXX\AppData\Roaming\npm\yarnpkg -> C:\Users\EMI\AppData\Roaming\npm\nod
e_modules\yarn\bin\yarn.js
C:\Users\XXX\AppData\Roaming\npm\yarn -> C:\Users\EMI\AppData\Roaming\npm\node_m
odules\yarn\bin\yarn.js
+ yarn#1.7.0
updated 1 package in 16.303s
From my understanding, it means that the application was installed correctly.
How do I start the server to show a simple "Hello World" program in ReactJS using Yarn?

Yarn is only a package manager. If you want to start a server to show a simple Hello World program, I'd suggest using something like create-react-app or write your own express server

If you are starting to learn react, knowing about create-react-app is highly useful. YOu can visit the page for more information which has good description on how to start your hello world and much more.
create-react-app creates a basic template for you to start learning react right away. You just need to commands,
1) npm install and,
2) npm start(which starts the server)

Related

How to deploy angular 7 project directly to my webserver, so that i shouldn't migrate my dist folder always after deployment?

Currently, I am deploying my Angular 7 Project by using FileZilla to migrate my local files from ./dist folder to server public_HTMl. This is a quite tides job to carry in a daily basis, so I want to deploy my code directly to the server, when I hit ng build --prod then those compiled files have to be migrated directly to the server. Do anybody here who can help me to solve this problem?
To get rid of this problem I have tried lots of steps:
I was using bitbucket pipelines to execute my code, it came to be costly and I cannot run it as well, It took several hours but cannot give output for me.
I also tried by using new Git Repository even it's a good way but cannot give me the solution because when I deploy my code locally it creates a new folder every time while I execute a command.
So, I want to get help and deploy this code directly to the server that is going to host my application. Thank you all and hope all of you provide me good tips regarding this problem.
You can do it in the simple way. Create basic bash/sh script or windows executable and use rsync to do this automatically:
deploy.sh:
#!/bin/bash
ng build --prod
rsync -arvt ./dist remoteuser#remotehost:/var/www/remotedirectory
To avoid entering login and password every time add RSA public key to your remote machine(trusted host). You can combine this solution with Bitbucket pipelines, when the free plan ends I run this script manually from my developer machine.
bitbucket-pipelines.yml:
image: mycustomimage:latest
pipelines:
default:
- step:
name: Build and deploy to production
caches:
- node
deployment: production
script:
- npm install
- npm install -g #angular/cli
- ng config -g cli.warnings.versionMismatch false
- ./deploy.sh
Instead of a simple script you can use some more complex solution like Capistrano, Shipit or some other more advanced tool. All depends on your needs...
The simplest solution is always the best :)

Laravel Vue.js application not running

I have a serious problem on running Laravel + Vue.js new applications. I tried that on a 50% developed app and also on a brand new Laravel instalation and that shows the same error. After installing the Laravel and going into php artisan serve i start a common routine to start Vue.js within that Laravel application, which means NPM RUN INSTALL and right after NPM RUN DEV. This is what the errors show me:
I have tried all possible solutions found on previous posts on Stack Overflow and Github but the error persists. I have a node version 10.15.1 and the latest Laravel scaffold. Any thoughts on what might be happening? Im at the point of giving up using a scaffold Vue.js and instead using it as stand alone.
Thank you!
It seems like, It fails while vue-template-compiler package getting install through yarn.
It might be issue with yarn in your system.
Try to first install vue-template-compiler through NPM:
npm install vue-template-compiler
Then try again with npm run dev.
I hope this will help.

How do I run a copied project in Node.js

https://github.com/gleitz/mahjong
I want to run this app on my windows,
the directions say:
-Install dependencies with npm update
-Start the application with node app.js
it's sound easy so I try myself.
1.Fist of all , I install node.js on it's official website (https://nodejs.org/en/)
I download the 8.9.3 version.
after installing node.js
2.open the command line and go to the project path.
3.then I input the command npm update.
it works,and the node_modules folder is created.But there are some warn message
4.finally input the command node app.js... it's not work with many error message
following is wrong message
I wonder know how should I do.Is any thing I didn't installed?
Please help me.I really want to research this mahjong project.
Before running npm update in the directory where you have your project, you should run npm install first to install all the required dependencies needed for the project to run.
So I advice to delete the node_modules directory that was created after you ran npm update, after which you can then run npm install. This should solve your issue.
Update: If you just want to try it online and not run it locally they've hosted a version on the web: http://gleitzman.com/apps/mahjong.
It's not your fault.
What you did was correct, but the project documentation needs to be updated. It's not a turn-key solution and you'll need to figure a few things out to get it working.
The error message is says it wants a mongo db instance, but you don't have one running. Try the mongodb home page or google for instructions. If you have docker it is pretty easy: docker run -it -p 27017:27017 mongo.
Even after spinning up mongodb I wasn't able to get the app to work locally. You could try contacting the repo maintainer for assistance. They may be happy to help given you've shown interest in their project.
Good Luck!

Is it possible to run React project without npm start?

I'm in a big trouble. Working in a part time in a company they're looking for a new web technology to build "web-component" in their website.
They have started to use AngularJS (first version) and I told them that, with the recent evolution of this framework, it's not the right period of time to deal with it.
That's why I began to be interested in ReactJS. However, they don't have a node.js server infrastructure (and that's why AngularJS suits to them, only one browser is sufficient) so it's impossible to run it with something like "npm start".
SO ! My question is (as my post's title says...) :
Is it possible to run ReactJS without server side ?
I've tried with the following line in my header
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
But it remains a blank page.
Maybe there is something I don't understant in the react structure and that's why I'm looking for some help/explanations from you.
I hope I have been clear enough ! Thank you in advance for answer.
It is absolutely possible to run a React app without a production node server. Facebook provides an easy-to-use project bootstrapper that you can read about here
That being said, developers may need to use a node dev server locally via npm start, as well as using node to perform production builds via npm run build. But one can take the build output from npm run build and serve it from any static server and have a working react application.
For those who are getting 404's after deploying in a sub directory. Make sure to add the path in package.json as homepage.
"homepage": "https://example.com/SUB-DIRECTORY",
You should insert "homepage": "./" into your package.json file, then use building react-script command like npm run build.
I did it by using serve, as part of the build step in Jenkins. To install it, execute the command:
npm install -g serve
Then, to serve it:
serve -s build
Please, refer to project page for more information: https://github.com/zeit/serve

How to run a Node.JS app that is forked from github?

Before I say anything else, I am a complete noob to node.js and I just want to see what this web application looks like. I noticed this project at a hackathon and I wanted to test it out. They gave the github repo: https://github.com/android-fanatic/Web But I can't run it from my computer. I understand that I would need to use the command prompt and run it from my local server, but can someone give me step by step directions for installing the node.js app?
Again the link is:
https://github.com/android-fanatic/Web
Thanks in advance for any help! :)
Install Node.js
Clone the repository to somewhere on your hard drive
Open a command prompt and go to that directory
Type npm install to install any dependencies
Type npm start
???
PROFIT
The reason you can use npm start is because if you look inside of their package.json file you'll see a "start" option under "scripts". That command will execute when you type npm start.
Assuming you have node and npm installed on your system, you should be able to do:
npm install
npm start
The first command will install the node package dependencies and the second will run the server.
Note: I have never used this project, so my guess is based on looking at the repo alone.
The web application should be available at:
http://localhost:3000

Categories

Resources