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
Related
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 :)
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)
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!
I'm a little confused as to why I can't get my Gruntfile.js to run, here's the rub:
I installed grunt globally using npm. It lives in my /usr/local/bin/ directory, here it is:
Previously, I'd installed node.js using homebrew, then grunt with npm. Other issues led me to uninstall node via homebrew & reinstall node directly from the disk image node provides.
In my web project's index, there's a Gruntfile.js script that rebuilds my jekyll site everytime live-reload updates. When I run grunt, I get this message:
What I'm trying to wrap my head around:
Why isn't /usr/local/bin/grunt a valid path? Grunt exists at that location. My guess was that running grunt locally, from within my website's index, would fix things.
There's a node_modules folder there & everything was working fine before after all. I found this link, and tried running \grunt to bypass the bash alias, but that had no effect.
Any advice/suggestions are much appreciated! I feel like an imbecile using things, breaking things & not understanding why/how. Eager to finish my project, get a paycheck & finally have time to learn the ins and outs of terminal, bash & popular package managers so I don't run into these sorts of problems...
After discussion with OP, I find this is a Node.js environment issue. After install - do something - uninstall - reinstall in another way - do something, somehow, when npm install -g XXX is executed, the symbolic link is created and point to some place, but the package is installed some where else. That's why OP see /usr/local/bin/grunt but cannot run it.
I've recommended OP to clean up all Node.js stuff, make a clean environment and start right from the beginning.
I am pretty new to web development and I was asked to create a single-page application with tools of my choice. The only requirement is that it has to run locally on a GlassFish server (in NetBeans: Java Web > Web Application). I use the create-react-app starter kit provided by Facebook to build the application. When I run npm run build I get a build folder containing an html-file and a js-file. But when I double-click the html-file, the browser opens and just shows an empty page. Does anyone know what I have to configure in order to get a bundled html-file that shows the application when I open it?
Thank you
After running "npm run build" on your create-react-app generated code, it displays instructions to help with just this. It says something like:
You may also serve it locally with a static server:
npm install -g pushstate-server
pushstate-server build
The first command, "npm install -g pushstate-server" only needs to be run once, as it installs "pushstate-server" to global NPM. The second command "pushstate-server build" runs the simple static server, pushstate-server, and serves up any content in the "build" folder at http://localhost:9000. You can change the port number if you wish, by adding it at end of command line: "pushstate-server build 1234"
UDPATE: Serverless method...
If your goal is to run the page from the file system, and not from a web server, you'll need to tweak the build/index.html to fix the paths to your JS and CSS (and less importantly, your favicon.ico). The index.html generated by create-react-app expects your JS and CSS to be at "/static/...". However, when you open from the file system, that path is not correct. If you remove the leading forward slash, making the URLs relative, your page will load properly from the file system:
After running "npm run build", open the generated "build/index.html" file. Remove the leading forward slash from "/favicon.ico", "/static/js/main.[random string].js" and "/static/css/main.[random string].css" and save your changes (so that the all read "static/..." and not "/static/..."). Reload/refresh the page in the browser.