I have finished React Project yarn build it to static and hosted on server.
But when I have to Update something, first I change on to my local project then yarn build again.Then I delete previews files on server and put a new ones. this goes on and on. I'm planning React + Laravel Project but I don't want every time I update something to do yarn build again and again. is there any other way to update React(already built) files?
You can use rsync to sync files between different machines.
If you are familiar with JavaScript, there is a tool called shipit that you can use to build&deploy automatically in a few lines of JavaScript code.
Related
I am trying to implement automated process of converting html into react components. I am following below link to automatically convert html into react components.
https://www.npmjs.com/package/html-to-react-components
but i am getting failure of command html2react. I also installed the package by using below command.
"npm i -g html-to-react-components".
But still it is saying "'html2react' is not recognized as an internal or external command,operable program or batch file".
The problem was that I installed the package globally. As i installed globally so i have to place my html file in C:/Users/YourComputerName/AppData/Roaming/npm.
and then from CLI I have to open the above folder and directory in which my html2react package is installed.
And then from that directory I have to implement the html2react command.
For clear understanding i am also attaching snapshot as well. CLI command description
Have a good learning.
Not using a pre-existing boilerplate like electron-vue, I'd like to set up a Electron app with Vue.js. What is the procedure to do so, specifically for a beginner?
So far,I have installed vue cli globally with NPM, created my project with vue create, then installed electron into it with npm install electron.
From here is where everything falls apart. The article I was following specifies starting the app with dev, which runs: "NODE_ENV=DEV vue-cli-service serve & sleep 5 && NODE_ENV=DEV electron app.js". For whatever reason, this doesn't work. Comments on the article seem to suggest these commands are linux formatted, but no one has provided a windows formatted equivalent.
electron . starts the app, as expected, but vue components just dont work. Adding a basic <script src="> tag to the vue CDN at the top of the index.html works, and causes it to work, but ideally I'd like the electron app to work offline, which I believe was the point of using vue-cli as opposed to just importing it from the CDN.
Is there a simple way to do this? or would I be better off just downloading vue manually, throwing it into a folder in the electron app, and loading it with a script tag?
The easiest way to create an Electron app with vue.js as the frontend framework:
install vue-cli 3：
npm install -g #vue/cli
create a project (be patient because it may take a while):
vue create myproject
cd myproject
add and invoke the generator of vue-cli-plugin-electron-builder (it will automatically set up electron for you and let you check changed files):
vue add electron-builder
test your app:
npm run electron:serve
or build your app:
npm run electron:build
See more in this guide: https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/#to-start-a-development-server
This works in Windows Powershell if all PATH variables to vue-cli-sevice and electron are correct:
set NODE_ENV=DEV ; vue serve ; timeout 5 ; electron app.js
Note that the new version of vue changed some commands:
https://cli.vuejs.org/guide/installation.html
Windows command help:
Setting and getting Windows environment variables from the command prompt?
How do I run two commands in one line in Windows CMD?
What solved the issue in the end was changing relative paths to absolute.
Also this was useful: https://nklayman.github.io/vue-cli-plugin-electron-builder/
I have cloned the Angular2 quickstart repo and build a simple app. I want to publish it to the web now. It runs locally but it references files directly inside the node_modules directory.
Is there a standard build process I can run that will copy all needed files to the output directory? Or do I have to create this myself from scratch with a task runner or something?
This is my first time to answer a question so bear with me if I didnt do it correctly.
If "bundling all angular 2 ts/js and other dependencies (core.js, rxjs, zone.js) into one js and create a script tag on index.html to reference the bundled js" close to the standard build process you mentioned and you want, my answer is yes, you probably need to npm install some other tools to do it.
Since the angular 2 quickstart is using systemjs to do ES module loading, the tool you can use is called "systemjs builder" https://github.com/systemjs/builder which helps you to do bundling (based on systemjs.config.js) and yes, you can use a task tunner (grunt or gulp) with systemjs builder plugins (gulp-systemjs-builder or grunt-systemjs-builder) to create a task to "build".
You can use this https://github.com/AngularClass/angular2-webpack-starter
And using npm run build:dev or npm run build:prod
It will build a dist folder and that's all you need.
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
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.