use vue-cli output in php project? - javascript

When I use vue-cli, I'll automatically create a local server.
My question is: Can I use the vue-cli output in php project (for example, app.js ) ?
What is the local network for? Is it going to help Frontend programmers?
I know, "devDependencies" (which probably includes this local server) did not work effectively in the final file.
thank you

vue-cli gives you a simple HTTP server running on nodejs which is called Node.js static file server. It's main purpose is to help developers at development time.
For production you need a production server like Apache Web Server.
Whether you need PHP or not depends on your application's nature. Many apps require server side rendering. If so, you need PHP. If not, just copy the dist folder's content to Apache Web Server's hosting folder.

Related

Where should I put the frontend server code in app created with create-react-app?

I created an app with create-react-app and I'd like to log something in its server console. How could I do this?
I've tried adding index.js to the root folder and creating server folder, but it doesn't work.
Edit: I don't mean the backend server here, but just the frontend server. I'd like to print something in the same console where I type npm start. Is it possible?
If I understand correctly to do such a thing you should do eject your create-react-app otherwise you won't be able to modify the build scripts.
After the eject you can modify the webpack script or any other script you need to.
If you decide to do it, be careful because it will be more difficult to update your build dependencies.
First, you cannot put your backend code in the frontend code. Because the backend code is run by Node.JS enabled server. But the front end code is run by your browser.
All the react code will be bundled into one js file, which will be loaded by the browser. It will be simple JS files that renders views.
When you see localhost:3000 the server is given to you by default to VIEW and LOAD your front-end code. Most of the times it is webpack-dev-server.
The common options are:
1) If backend is REST/SOAP api then use XHR/ajax to hit the api. You just have to put the react generated JS file to your backend server's public folder. Also you can use completely different repos/codebases too in this approach.
2) You can use Server side rendering of sort where you put front end code in your backend views.

NodeJS and client-side Javascript in Ember application

I am working on developing a client-side application built on EmberJS.
Now, while I test the code in the browser ultimately, I have the following locally for development;
NodeJS & NPM
I have defined bower.json & package.json
I use ember-cli & do ember build & ember server to start the local server
I hit the URL http://localhost:4200 in the browser to access the app
Now my question is I wanted to understand, what exactly is happening here ?
Meaning what exactly happens before code runs in the browser.
I understand when the build happens, it actually pushes code into the 'dist' directory.
Is there any role in NodeJS in all of this (meaning any JS run on server-side in the background) OR we just utilize npm/bower for this case ?
So I just wanted to connect all the dots regarding running in the browser.
browsers don't support the features of modern javascript, so when you end up deploying your ember site, you only need to deploy static files (from the dist directory), and you actually don't need a server at all.
This is how https://emberclear.io works (no server, just a CDN).
The NodeJS things are purely for pre-deployment needs (development, transpiling, testing, etc).
Hope this helps.

Develop React w/ full-stack (WAMP) locally

Is there any way to setup local development environment with React at front-end and a full-stack server (e.g. WAMP)?
The perfect case is to:
Use the default React Create App setup without ejecting scripts
Make AJAX calls to PHP files which will handle the queries to MySQL database
Questions:
Is it possible to just run WAMP at localhost:3000 and React yarn start at localhost:3002 (it auto-sets different IP) and then just put PHP files somewhere inside src folder and call them from JSX using one of the AJAX technologies (e.g. jQuery or native XMLHttpRequest)?
Or the only way is to eject the scripts and then build and put files inside WAMP's /www/project folder and then use custom tools to update all this stuff at WAMP's localhost address?
EDIT: putting react app into /wamp/www is not an option - it didn' work for me and I don't want to put more efforts into it. Running React and WAMP in on localhost seems to work, the question to answer is:
How to import the PHP file into JSX. Trying to call it with smth like: require('./foo.php') does not work. import foo from ./foo.php didn't work either. Anly ideas?
After investigation I have found a way to achieve my goal.
The key to be able to send request to any local server you use (Apache, Nginx, Node.js) it to use ReactJS proxy feature:
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development
After adding "proxy": "http://localhost" to my package.json file I was able to send and receive requests to my WAMP server while keeping all React's Create App native scripts.
P.S. It turned out Facebook has a nice React-native tool for request called fetch - https://facebook.github.io/react-native/docs/network.html.
1) I strongly recommend you do try to do this :
Separation of concerns is very important. having two repositories for your application, one for the backend and one for the front end is very important. Especially if you are using a versioning system, and more importantly, if you plan on working on it in a team. I suggest you just have your wamp installation stay where it is, add a Vhost like : backend.my-project.com, and then run your react app normally, and use the env.local in cra file to store the URL of your backend app using the environment variables.
2) You do not need to eject scripts to have both your frontend and backend in the same place :
Either create-react-app inside your wamp folder, or point your wamp folder to your create-reac-app generated react app

Can hackers access/copy/download JS server side code deployed on Node Js?

I would like to deploy a Web App on NodeJS with some server side JavaScript code. Will this server side code be accessible by external users/hackers? Can someone copy or download this code somehow? If the JavaScript files reside in a non-public folder on the server, can users access it? Can the app work if JS files are not located in a public folder?
With a properly configured node.js server, server-side JS files are not accessible to the public. The server-side code runs only on the server and thus does not need to be available in any way to the public. It's the exact same as server-side PHP or Python or Java.
As long as you configure your server with appropriate security measures and do not allow your node.js server to "serve" any of your server-side Javascript files to the public, then they will not be available to the public.
This is, of course, different from client-side Javascript which runs in the browser which cannot be protected and will always be available to the public.
If the Javascript files reside in a non-public folder on the server, can users access it.
No.
Can the app work if JS files are not located in a public folder?
Yes. The server-side JS files need only be available to the node.js process, not to the public.
To add to the answer all you need to manage are server configurations for which files and directories are available to the public. You can also (and should know how to) manage file and directory permissions on operating systems. When you go into a server configuration file you explicitly permit which directories you are allowing to be served to web traffic; which files are used for configuration varies according to server type. You should get familiar with server configuration files and understand what they do before serving any web pages to the public. You should also know the different configurations on a server such as production settings versus development settings.

Can i run a php file or a html file in a node js web server?

Maybe it's a stupid question but i am a newbie using node js, and I think that it can be used just with js files, I dont know, I installed node js on my windows and i started the web server but i dont know how to run the files, I have always worked with apache, I saw there is a folder called scrips in the node js installation folder
but i dont know how to run the files, I have always worked with apache.
In NodeJS, it's either you write the web server (it's like writing Apache itself), or use a framework that does it for you (it's like adding in something like Apache). Suggesting you check out Express. It's something almost close to CodeIgniter (writing points of entry).
Can i run a php file or a html file in a node js web server?
NodeJS is for JS. Your server files are all in JS. As for HTML, checkout Express (mentioned above), or if you just want to serve plain HTML (or static files), you may want to check out Connect Static

Categories