How do I serve a Vue Webpack app from Sails.js? - javascript

I have a Sails.js server and a Vue Webpack application running separately. This is what my folder structure looks like:
/application-root/server/
/application-root/client/
The /server/ folder contains my Sails.js application and /client/ contains my Vue Webpack application.
I don't want to host these two separately. I want to be able to just deploy the server and make it such that the server renders the Vue Webpack application. I am aware that Sails uses .ejs as a templating engine.
How do I render my Vue.js application instead of the default .ejs templates that Sails uses?
I tried solutions like vue-sails-template etc. but they all come with some compromises and pre-existing code that I have to work around. Thanks.

First, you'll need to run npm run build to get a version of the Vue webpack application that is useful to a server side renderer.
I don't know much about Sails, but check out this previous answer to see if that's helpful for the rest.

Related

How to add SSR to existing React.js application in Express.js

I have simple React application and I want to add SSR in Express.js.
I made a bit of a gaff in the beginning and in my repository I just have a frontend folder and in it the whole React app with typescript, babel and webpack configured.
I haven't played with SSR yet, so I'm curious, if I want to make such a server and have its file in the folder next to the frontend folder, would I have to install and set all the dependencies I made inside the`frontend folder, and only then create the server.js file ?
Then in the middle of "frontend/src" I would have 2 files - index.tsx (with React.render() method), because I would like to be able to run the application also without the server. And 2nd file would be indexServer.tsx with React.hydrate() method, which would go to server.js file (i.e. would be for generating application by server). Is this concept right ?
Link to my github repo with this react app: https://github.com/poldeeek/spider-game
If I want to make such a server and have its file in the folder next to the frontend folder, would I have to install and set all the dependencies I made inside the`frontend folder, and only then create the server.js file ?
You'll probably need to re-install all the dependencies if you choose to setup two separate folders like that. I would recommend putting server.js in frontend/server, which can then use the same node_modules as your frontend/src/index.js is using.
Then in the middle of "frontend/src" I would have 2 files - index.tsx (with React.render() method), because I would like to be able to run the application also without the server. And 2nd file would be indexServer.tsx with React.hydrate() method, which would go to server.js file (i.e. would be for generating application by server). Is this concept right ?
There is no right or wrong answer here. If this setup suits your needs, then go with it. The only challenge with this setup is that you have to configure babel and webpack to point to two different files: index.tsx (in case you don't want the server) and indexServer.tsx (in case you want to include the server).

Can we use angular without node?

We are working with Django as a server framework and used JavaScript for client-side scripting. Now we are migrating to Angular4, do we need to run a node.js server with the existing running Django server?
No, Angular is basically concerned with your front-end in your case, you don't need to use Node together with Django for your back-end.
However, what you would need node for is the build process and dependencies, as Node helps in the building process of your Angular project and in the management of your dependencies, this is facilitated also with NPM.
Apart from that, Node also allows you use the port:4200 when serving using ng serve.... Once your project passes the development stage and you have a dist folder, you don't need the ng serve process anymore and the files within the folder are static and can be run like your normal index.html files...
I do hope this is helpful.
Angular is for your front-end. You can use what you want for the back-end.
You can use Node to build your sources, to convert typescript files to javascript files.

How do my Vuejs frontend and my node express backend interact with each other and do i need the vue-cli?

I am trying to build a simple website with nodejs, express and vuejs.
In tutorials i saw people recommending having the frontend and the backend communicate through an API by using the vue-cli. (example). 1. Do People use this method in production as well?
I also saw that you can build the vue cli files into a /dist folder and move this folder into the backend. Then you can use the backend to serve the generated index.html (example)
2. After doing this, is vue.js still communicating with the backend through the api i wrote with the vue cli for development?
3. Do i have to change code in the backend to deploy the website this way, other than statically serve the index.html file that was build by the vue-cli? and lastly 3.Can i just npm install vue and use the provided vue.min.js in a scripttag and just lose some usablillity while developing?
I hope my question is understandable and i appreciate every answer.
The backend typically serves the frontend via REST API.
Your Vue app is completely separate from your backend. Most applications keep business logic in the backend and use the frontend as a view. For smaller projects, you can keep the logic in the browser.
To answer your question directly: No, the Vue CLI is not used for that. It's purpose is to enhance your development process.
Relevant topics you should learn about: Representational state transfer (REST), Single page applications, Ajax
Advanced / less relevant topics: GraphQL, Server side rendering, HTTP, web sockets, MVC

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

Ember-CLI rundown using it with Laravel or other backend frameworks

Using the ember-starter-kit all I had to do was throw the contents of it in the /my_laravel_app/public folder and everything was fine.
Now I am trying to create a project with laravel and ember-cli
I'm a little confused as to how I need to structure my application? In which laravel folder should I be running the ember new my-app command? Furthermore, how can I use apache for testing my ember-cli application instead of using ember server command since I need to test it with my laravel generated apis.
Any help is much appreciated!
Here is one way to do it
Go into your root laravel folder and run the ember new my_app_name
Then go into your my_app_name folder and create a new file build_custom.sh add the following lines to the file
ember build
cp dist/index.html ../app/views/ember.php
cp -r dist/assets ../public/assets
Explanation: the first line builds your ember-cli app and generates all the necessary files in the dist/ folder. The second line copies the index.html file generated to app/views/ folder and renames it ember.php so laravel can recognize it. The last line just copies all the assets into your laravel public folder
You can add the following in your app/routes.php file in laravel to serve your ember app. Make sure it's all the way at the bottom so your other api routes take preference
Route::get('{ember?}', function() {
return View::make('ember');
})->where('ember', '.*');
That should be it, everything should work as intended. Good luck.
Here is another way to do it:
You can create two separate folders: backend (laravel app) and frontend (ember app)
. Let's say, your laravel app is running under 192.168.10.10, you can then proxy your ember app ajax requests using ember-cli command: ember serve --proxy http://192.168.10.10. Using this proxy option, all commands will be passed to ip address, specified with --proxy option - in this case ip address, where laravel app is running (where api is listening).
If you getting UnrecognizedURLError: /ember try to remove welcome route on laravel...

Categories